用ajax请求本地的json失效,通过jquery的ajax请求本地的json文件方法

自己学习jquery的ajax的经历，记录一下

ajaxTestDemo.html

在body里面放一个id为test的div

第一步还是要先加载jquery文件 jquery.min.js

$(function(){

$.ajax({

//请求方式为get

type:"GET",

//json文件位置

url:"./data/shuju.json",

//返回数据格式为json

dataType: "json",

//请求成功完成后要执行的方法

success: function(data){

//使用$.each方法遍历返回的数据date,插入到id为#result中

var str="

• ";

$.each(data.list,function(i,n){

str+="

"+n["item"]+"";

})

str+="

";

$("#test").append(str);

}

});

});

shuju.json文件

{

"list":[

{"item":"审计管理"},

{"item":"菜单管理"},

{"item":"订单管理"},

{"item":"合同管理"},

{"item":"物流管理"},

{"item":"行政管理"},

{"item":"人事管理"},

{"item":"购物管理"},

{"item":"批发管理"},

{"item":"安全管理"},

{"item":"账号管理"},

{"item":"财务管理"},

{"item":"其他管理"}

]

}

/* json文件里竟然不能有这样的注释，因为困扰了几个小时！*/

完整的页面代码

测试jquey的ajax方法

*{

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;

}

$(function(){

alert(1);

$.ajax({

//请求方式为get

type:"GET",

//json文件位置

url:"./data/shuju.json",

//返回数据格式为json

dataType: "json",

//请求成功完成后要执行的方法

success: function(data){

//使用$.each方法遍历返回的数据date,插入到id为#result中

var str="

• ";

$.each(data.list,function(i,n){

str+="

"+n["item"]+"";

})

str+="

";

$("#test").append(str);

}

});

});

还可以通过$.getJSON来获取本地json文件

/* getJSON*/

$(function(){

$.getJSON("./data/shuju.json",function(data){

var str="

• ";

$.each(data.list,function(i,n){

str+="

"+n["item"]+"";

})

str+="

";

$("#test").append(str);

});

});

以上这篇通过jquery的ajax请求本地的json文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。