jQuery ajax读取本地json文件的实例


Posted in jQuery onOctober 31, 2017

json文件

{
  "first":[
    {"name":"张三","sex":"男"},
    {"name":"李四","sex":"男"},
    {"name":"王武","sex":"男"},
    {"name":"李梅","sex":"女"}
  ]
}

js:

方法一:

$.ajax({
  url: "ceshi.json",//json文件位置
  type: "GET",//请求方式为get
  dataType: "json", //返回数据格式为json
  success: function(data) {//请求成功完成后要执行的方法 
    //each循环 使用$.each方法遍历返回的数据date
    $.each(data.first, function(i, item) {
      var str = '<div>姓名:' + item.name + '性别:' + item.sex + '</div>';
      document.write(str);
    })
  }
})

方法二:

jQuery.getJSON()是jQuery.ajax()函数的简写形式

// jQuery.getJSON( url [, data ] [, success ] )
$.getJSON("ceshi.json", "", function(data) {
    //each循环 使用$.each方法遍历返回的数据date
    $.each(data.first, function(i, item) {
      var str = '<div>姓名:' + item.name + '性别:' + item.sex + '</div>';
      document.write(str);
    })
});

以上这篇jQuery ajax读取本地json文件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
Vue中正确使用jQuery的方法
Oct 30 #jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
You might like
php获得文件扩展名三法
2006/11/25 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
降低PHP Redis内存占用
2017/03/23 PHP
js 匿名调用实现代码
2009/06/19 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
深入理解Python中字典的键的使用
2015/08/19 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
详解python中@的用法
2019/03/27 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python实现操作文件(文件夹)
2019/10/31 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
UDP协议功能
2013/01/06 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
高温慰问简报
2015/07/21 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python