jQuery如何非同步獲取遠端伺服器json格式資料

antzone發表於2017-03-29
原文網址 : https://www.softwhy.com/article-5007-1.html
jQuery非同步伺服器JSON

本章節介紹一下如何利用jQuery獲取伺服器json格式資料效果。

通常來說可以使用jQuery中的兩個方法，一個是$.getJSON()，另一個是$.ajax()。

其實$.getJSON()內部是由$.ajax()實現的，是$.ajax()的簡化版本。

首先在伺服器下建立一個文字檔案,命名為antzone.txt，裡面程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
{
  "webName":"螞蟻部落",
  "address":"青島市南區"
}

一.使用$.getJSON()方法獲取資料:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#bt").click(function(){
    var str="<ul>";
    $.getJSON('demo/jQuery/ajax/txt/antzone.txt',function(data){
      $.each(data,function(key,val){
        str=str+'<li id="' + key + '">' + val + '</li>';
      });
      str=str+"</ul>";
      $("#show").html(str);
    });
  })
});
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

在上面的程式碼中，點選按鈕可以獲取json資料，並將其內容寫入div中。

二.使用$.ajax方法獲取資料:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#bt").click(function(){
    var str="<ul>";
    $.ajax({
      url:'demo/jQuery/ajax/txt/antzone.txt',
      type:"GET",
      success:function(data){
        $.each(data,function(key,val){
          str=str+'<li id="' + key + '">' + val + '</li>';
        });
        str=str+"</ul>";
        $("#show").html(str);
      },
      dataType:"json"
    });
  })
});
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼同樣實現我們的要求，更多內容可以參閱jQuery.getJSON()一章節。

相關文章