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 05 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
年会活动策划方案
2014/01/23 职场文书
个人党性剖析材料
2014/02/03 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
技术员个人工作总结
2015/03/03 职场文书
音乐教师求职信范文
2015/03/20 职场文书
党员转正申请报告
2015/05/15 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS