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实现的手风琴侧边菜单效果
Mar 29 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery css实现流程进度条
Mar 26 jQuery
JQuery复选框全选效果如何实现
May 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
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
js实现简易计算器功能
2019/10/18 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python文件写入实例分析
2015/04/08 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
创建Django项目图文实例详解
2019/06/06 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
植树节新闻稿
2015/07/17 职场文书
清明节主题班会
2015/08/14 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript