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树插件zTree使用方法详解
May 02 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php把session写入数据库示例
2014/02/26 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
slice函数的用法 之不错的应用
2006/12/29 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python判断Abundant Number的方法
2015/06/15 Python
python用户管理系统的实例讲解
2017/12/23 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
施工资料员的岗位职责
2013/12/22 职场文书
交通事故协议书
2014/04/15 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
《花钟》教学反思
2016/02/17 职场文书