您好,登錄后才能下訂單哦!
自己學(xué)習(xí)jquery的ajax的經(jīng)歷,記錄一下
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", //返回?cái)?shù)據(jù)格式為json dataType: "json", //請求成功完成后要執(zhí)行的方法 success: function(data){ //使用$.each方法遍歷返回的數(shù)據(jù)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":"審計(jì)管理"}, {"item":"菜單管理"}, {"item":"訂單管理"}, {"item":"合同管理"}, {"item":"物流管理"}, {"item":"行政管理"}, {"item":"人事管理"}, {"item":"購物管理"}, {"item":"批發(fā)管理"}, {"item":"安全管理"}, {"item":"賬號管理"}, {"item":"財(cái)務(wù)管理"}, {"item":"其他管理"} ] }
/* json文件里竟然不能有這樣的注釋,因?yàn)槔_了幾個小時(shí)!*/
完整的頁面代碼
<!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", //返回?cái)?shù)據(jù)格式為json dataType: "json", //請求成功完成后要執(zhí)行的方法 success: function(data){ //使用$.each方法遍歷返回的數(shù)據(jù)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文件方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。