自己學習jquery的ajax的經歷，記錄一下
ajaxTestDemo.html
在body里面放一個id為test的div
<div id="test"></div>
第一步還是要先加載jquery文件 jquery.min.js
<script> $(function(){ $.ajax({ //請求方式為get type:"GET", //json文件位置 url:"./data/shuju.json", //返回數據格式為json dataType: "json", //請求成功完成后要執行的方法 success: function(data){ //使用$.each方法遍歷返回的數據date,插入到id為#result中 var str="<ul>"; $.each(data.list,function(i,n){ str+="<li>"+n["item"]+"</li>"; }) str+="</ul>"; $("#test").append(str); } }); });</script>shuju.json文件
{ "list":[ {"item":"審計管理"}, {"item":"菜單管理"}, {"item":"訂單管理"}, {"item":"合同管理"}, {"item":"物流管理"}, {"item":"行政管理"}, {"item":"人事管理"}, {"item":"購物管理"}, {"item":"批發管理"}, {"item":"安全管理"}, {"item":"賬號管理"}, {"item":"財務管理"}, {"item":"其他管理"} ]}/* json文件里竟然不能有這樣的注釋，因為困擾了幾個小時！*/
完整的頁面代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>測試jquey的ajax方法</title> <style> *{ padding:0; margin:0; } #test{ padding: 0; margin: 0 auto; width:200px; height: 400px; } #test li{ list-style: none; width:200px; text-align: center; height:30px; line-height:30px; border:1px dashed lightgrey; } </style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script> $(function(){ alert(1); $.ajax({ //請求方式為get type:"GET", //json文件位置 url:"./data/shuju.json", //返回數據格式為json dataType: "json", //請求成功完成后要執行的方法 success: function(data){ //使用$.each方法遍歷返回的數據date,插入到id為#result中 var str="<ul>"; $.each(data.list,function(i,n){ str+="<li>"+n["item"]+"</li>"; }) str+="</ul>"; $("#test").append(str); } }); });</script></body></html>還可以通過$.getJSON來獲取本地json文件
/* getJSON*/$(function(){ $.getJSON("./data/shuju.json",function(data){ var str="<ul>"; $.each(data.list,function(i,n){ str+="<li>"+n["item"]+"</li>"; }) str+="</ul>"; $("#test").append(str); });});以上這篇通過jquery的ajax請求本地的json文件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
