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 相关文章推荐
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery css实现流程进度条
Mar 26 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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简单命令代码集锦
2007/09/24 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
python批量下载图片的三种方法
2013/04/22 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
毕业生求职自荐书范文
2014/03/27 职场文书
项目投资建议书
2014/05/16 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python