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


Posted in jQuery onAugust 08, 2018

自己学习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文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery仿微信聊天界面
May 06 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
You might like
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
PHP 文件上传限制问题
2019/09/01 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JS高级运动实例分析
2016/12/20 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python实现k-means聚类算法
2018/02/23 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python 星号(*)的多种用途
2020/09/21 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
Python如何实现单例模式
2016/06/03 面试题
技校毕业生的自我评价
2013/12/27 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
品德评语大全
2014/05/05 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
领导新年致辞2016
2015/07/29 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
改造DE1103三步曲
2022/04/07 无线电
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers