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多种数据类型表格排序代码分析
Sep 11 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
js实现搜索栏效果
Nov 16 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python使用tornado实现简单爬虫
2018/07/28 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python reverse反转部分数组的实例
2018/12/13 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python利用platform模块获取系统信息
2020/10/09 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
神路信息Java面试题目
2013/03/31 面试题
总裁秘书岗位职责
2013/12/04 职场文书
小学英语复习计划
2015/01/19 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis