jQuery ajax讀取本地json文件
-
ceshi.json
{ "first": [ { "name": "張三", "sex": "男" }, { "name": "李思", "sex": "女" }, { "name": "王五", "sex": "男" }, { "name": "趙柳", "sex": "女" } ] } -
源碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js"></script> <script> //方法一 function ajax_test() { $.ajax({ url: "ceshi.json", //json文件位置 type: "GET", //請求方式為get dataType: "json", //返回數據格式為json success: function(data) { //請求成功完成后要執行的方法 alert(data.first[0].name); //each循環 使用$.each方法遍歷返回的數據date $.each(data.first, function(i, item) { var str = '<div>姓名:' + item.name + '性別：' + item.sex + '</div>'; document.write(str); }) } }) } ajax_test(); //執行函數 //方法二: //jQuery.getJSON()是jQuery.ajax()函數的簡寫形式. // jQuery.getJSON( url [, data ] [, success ] ) $.getJSON("ceshi.json", "", function(data) { //each循環 使用$.each方法遍歷返回的數據date $.each(data.first, function(i, item) { var str = '<br/><div>姓名:' + item.name + '性別：' + item.sex + '</div>'; document.write(str); }) }); </script> <title>ajax獲取json測試</title> </head> 測試 <body> </body> </html> -
效果
