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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 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反射类ReflectionClass用法分析
2016/05/12 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
企业车辆管理制度
2014/01/24 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
高一学生期末评语
2014/04/25 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
仓管员岗位职责
2015/02/03 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
防止web项目中的SQL注入
2021/12/06 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android