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中的deferred使用方法
Mar 27 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
html中两种获取标签内的值的方法
Jun 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
推荐一篇入门级的Class文章
2007/03/19 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
PHP 实现缩略图
2021/03/09 PHP
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
《欢乐的泼水节》教学反思
2014/04/22 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
暑期社会实践证明书
2014/11/17 职场文书
三方协议书
2015/01/27 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS