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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery操作事件完整实例分析
Jan 10 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
layui实现数据分页功能
2019/07/27 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python实现手机销售管理系统
2019/03/19 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
消防先进事迹材料
2014/02/10 职场文书
公司任命书范本
2014/06/04 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
服务整改报告
2014/11/06 职场文书
先进员工事迹材料
2014/12/20 职场文书
化验室岗位职责
2015/02/14 职场文书
管理失职检讨书
2015/05/05 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
化工生产实习心得体会
2016/01/22 职场文书
解析Java异步之call future
2021/06/14 Java/Android
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python