通过jquery的ajax请求本地的json文件方法

时间：2021-05-25

自己学习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":"其他管理"} ]}

完整的页面代码

<!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文件

$(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文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章