自己學習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文件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
