jQuery使用getJSON方法获取json数据完整示例


Posted in Javascript onSeptember 13, 2016

本文实例讲述了jQuery使用getJSON方法获取json数据。分享给大家供大家参考,具体如下:

demo.js:

[
  {
    "name":"吴者然",
    "sex":"男",
    "email":"demo1@123.com"
  },
  {
    "name":"吴中者",
    "sex":"男",
    "email":"demo2@123.com"
  },
  {
    "name":"何开",
    "sex":"女",
    "email":"demo3@123.com"
  }
]

demo.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<style type="text/css">
#divframe {
  border: 1px solid #999;
  width: 500px;
  margin: 0 auto;
}
.loadTitle {
  background: #CCC;
  height: 30px;
}
</style>
<script type="text/javascript">
$(function(){
  $("#btn").click(function(){
    $.getJSON("js/demo.js",function(data){
      var $jsontip = $("#jsonTip");
      var strHtml = "123";//存储数据的变量
      $jsontip.empty();//清空内容
      $.each(data,function(infoIndex,info){
        strHtml += "姓名:"+info["name"]+"<br>";
        strHtml += "性别:"+info["sex"]+"<br>";
        strHtml += "邮箱:"+info["email"]+"<br>";
        strHtml += "<hr>"
      })
      $jsontip.html(strHtml);//显示处理后的数据
    })
  })
})
</script>
</head>
<body>
<div id="divframe">
  <div class="loadTitle">
    <input type="button" value="获取数据" id="btn"/>
  </div>
  <div id="jsonTip"> </div>
</div>
</body>
</html>

效果图如下:

jQuery使用getJSON方法获取json数据完整示例

这里把 JSON 的后缀名改为 JS,放在 WEB 容器中则可以正常读取。

PS:这里再为大家推荐几款json在线工具,相信大家在今后的开发中可以用得到:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

JSON在线格式化工具:
http://tools.3water.com/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.3water.com/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
jQuery异步提交表单的两种方式
Sep 13 #Javascript
浅谈JS之tagNaem和nodeName
Sep 13 #Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 #Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 #Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 #Javascript
轻松实现js弹框显示选项
Sep 13 #Javascript
JS制作图形验证码实现代码
Oct 19 #Javascript
You might like
求PHP数组最大值,最小值的代码
2011/10/31 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue实现表格过滤功能
2019/09/27 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
什么是python的id函数
2020/06/11 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
医学生实习自我鉴定
2013/09/27 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
课外科技活动总结
2014/08/27 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年教研工作总结
2015/05/23 职场文书
贷款工资证明范本
2015/06/12 职场文书
基于python实现银行管理系统
2021/04/20 Python