通过jquery的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文件

菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"行政管理"},{"item":"人事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"} ] }

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

完整的页面代码

<Meta charset="UTF-8"> 测试jquey的ajax<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>

<div id="test">


<script src="js/jquery.min.js">

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

"; }) str+=""; $("#test").append(str); }); });

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

猜你在找的jQuery相关文章