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 js cookie的存储,获取和删除
Dec 29 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
Javascript实现字数统计
Jul 03 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 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源码之 ext/mysql扩展部分
2009/07/17 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
javascript天然的迭代器
2010/10/29 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
浅析Ajax语法
2016/12/05 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
详解Django中Request对象的相关用法
2015/07/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
小学班主任培训方案
2014/06/04 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
影视后期实训报告
2014/11/05 职场文书
管理人员岗位职责
2015/02/14 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
python turtle绘图
2022/05/04 Python