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 相关文章推荐
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现动态操作table行
Nov 23 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获取post中的json数据的实现方法
2011/06/08 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python socket编程实例详解
2015/05/27 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python 一句话生成字母表的方法
2019/01/02 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
办护照工作证明范本
2014/01/14 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年药店工作总结
2014/11/20 职场文书
慈善募捐倡议书
2015/04/27 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android