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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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调用Java对象的方法
2006/10/09 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
请假条怎么写
2014/04/10 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
工作说明书范文
2014/05/07 职场文书
停发工资证明范本
2015/06/12 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers