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表单验证之密码确认
May 22 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python实现ID3决策树算法
2017/12/20 Python
对python调用RPC接口的实例详解
2019/01/03 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python打包生成so文件的实现
2020/10/30 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
会计工作能力自我评价
2015/03/05 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Redis中一个String类型引发的惨案
2021/07/25 Redis
mysql 索引合并的使用
2021/08/30 MySQL
详解Python中__new__方法的作用
2022/03/31 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis