自己學(xué)習(xí)jquery的ajax的經(jīng)歷，記錄一下
ajaxTestDemo.html
在body里面放一個(gè)id為test的div
<div id="test"></div>
第一步還是要先加載jquery文件 jquery.min.js
<script> $(function(){ $.ajax({ //請(qǐng)求方式為get type:"GET", //json文件位置 url:"./data/shuju.json", //返回?cái)?shù)據(jù)格式為json dataType: "json", //請(qǐng)求成功完成后要執(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":"購(gòu)物管理"}, {"item":"批發(fā)管理"}, {"item":"安全管理"}, {"item":"賬號(hào)管理"}, {"item":"財(cái)務(wù)管理"}, {"item":"其他管理"} ]}/* json文件里竟然不能有這樣的注釋，因?yàn)槔_了幾個(gè)小時(shí)！*/
完整的頁(yè)面代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>測(cè)試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({ //請(qǐng)求方式為get type:"GET", //json文件位置 url:"./data/shuju.json", //返回?cái)?shù)據(jù)格式為json dataType: "json", //請(qǐng)求成功完成后要執(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來(lái)獲取本地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請(qǐng)求本地的json文件方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
