jQuery實現的JSONP應用程式碼例項

admin發表於2017-02-02
jQueryJSON
關於JSONP相關內容可以參閱JSONP用法詳解一章節。

事實上JSONP的實現和AJAX完全是兩碼事情，但是jQuery卻將JSONP和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>
function books(books){
  var books=books.book;
  var booksContainer=document.getElementById('books');
  var str="";
  for(var index=0;index<books.length;index++){
    str=str+"<div>"+
    books[index]["range"]+"，"+
    books[index]["author"]+","+
    books[index]["target"]+
    "</div>";
  }
  booksContainer.innerHTML=str
}
$(document).ready(function(){
  $.ajax({
    type:'get',
    url:'http://www.softwhy.com/demo/JSON/php/antzone.php?callback=books',
    dataType:'jsonp',
    jsonp:'callback',
    jsonpCallback:'books'
  });
})
</script>
</head>
<body>
<div id="books"></div>
</body>
</html>

相關文章