AD

jQuery中读取json文件示例代码

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

$.getJSON(url,[data],[callback])

url:加载的页面地址
data: 可选项,发送到服务器的数据,格式是key/value
callback:可选项,加载成功后执行的回调函数
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:

[email protected]" }, { "name":"张铁林", "sex":"男", "email":"[email protected]" }, { "name":"邓婕", "sex":"女", "email":"[email protected]" } ]

2.其次建一个页面用于获取JSON文件里的用户信息数据,并显示

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "****w3**/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="****w3**/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.8.2.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/userinfo.json",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>
标签: json, jquery
分类: jquery
时间: 2014-07-03

相关文章

  1. jQuery 中使用JSON的实现代码

    json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它 JSON 的格式说明可以在可以这里看到,非常详细,还是中文的. JSON 格式说明 需要特别注意的是,在 JSON 中的属性名是需 ...
  2. IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助 使用JS读取xml文件,这里暂只考虑IE浏览器 step1 创建DOM对象 functi ...
  3. JS读取XML文件示例代码

    读取XML文件的方法有很多,在本文为大家详细介绍下使用js是如何做到的,感兴趣的朋友可以参考下本文 //读取XML文件 function loadXML(xmlFile) { var xmlDoc; if (window ...
  4. Nodejs中读取中文文件编码问题.发送邮件和定时任务实例

    这篇文章主要介绍了Nodejs中读取中文文件编码问题.发送邮件和定时任务实例,本文使用了3个模块来解决这3个需求,并给出了代码操作实例,需要的朋友可以参考下 关于nodejs读取中文文件真是折腾了不少时间,网上各种方案, ...
  5. dom4j从jar包中读取xml文件的方法

    这篇文章主要介绍了dom4j从jar包中读取xml文件的方法,需要的朋友可以参考下 进行封装的时候,我们常常需要用xml来定义一些规范,在单独运行读取的时候当然不会有问题,但这些xml是往往是放在jar包里的,这样一来, ...
  6. java读取csv文件示例分享(java解析csv文件)

    这篇文章主要介绍了java读取csv文件示例,这个java解析csv文件的例子很简单,下面直接上代码,大家参考使用吧 import java.io.*; import java.util.*; public class ...
  7. php读取大文件示例分享(文件操作类)

    这篇文章主要介绍了php读取大文件示例,这也是一个文件操作类,同时可以学习一下php的文件操作方法,需要的朋友可以参考下 Lib_File2.php <?php class Lib_File2 { //文件目录 p ...
  8. c语言读取csv文件和c++读取csv文件示例分享

    这篇文章主要介绍了c语言读取csv文件和c++读取csv文件示例,需要的朋友可以参考下 C读取csv文件 #include <stdio.h> #include <string.h> char * ...
  9. C#中读取App.config配置文件代码实例

    这篇文章主要介绍了C#中读取App.config配置文件代码实例,包括循环读取.单个读取的方法,需要的朋友可以参考下 App.config是C#开发WinForm程序的配置文件,开发Web程序的配置文件叫Web.conf ...
  10. python读取csv文件示例(python操作csv)

    这篇文章主要介绍了python读取csv文件示例,这个示例简单说明了一下python操作csv的方法,需要的朋友可以参考下 import csv for line in open("test.csv" ...
  11. 在jQuery中 关于json空对象筛选替换

    本篇文章,小编将为大家介绍,在jQuery中 关于json空对象筛选替换,有需要的朋友可以参考一下 Requirement: 一个json object,并且可能包含一些空值或者空字符串,在页面显示的时候希望遇到空值显示 ...
  12. android读取assets文件示例

    这篇文章主要介绍了android读取assets文件示例,需要的朋友可以参考下 // 读取assets文件 private void assetsRead(){ String fileName = "my_as ...
  13. js获取url中指定参数值的示例代码

    这篇文章主要是对js获取url中指定参数值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: ///获取url中指定参数 // <param name="paras" ...
  14. python读取json文件并将数据插入到mongodb的方法

    这篇文章主要介绍了python读取json文件并将数据插入到mongodb的方法,实例分析了Python操作json及mongodb数据库的技巧,需要的朋友可以参考下 本文实例讲述了python读取json文件并将数据插 ...
  15. php读取excel文件示例分享(更新修改excel)

    这篇文章主要介绍了php读取excel文件示例,还有更新修改功能,需要的朋友可以参考下 //模板存放目录 $dir = $DOCUMENT_ROOT.'/backoffice/admin/oemcheck/'; $tem ...
  16. android读取raw文件示例

    这篇文章主要介绍了android读取raw文件示例,需要的朋友可以参考下 // 读取raw文件 private void rawRead(){ String ret = ""; try { Input ...
  17. 在JS中解析HTML字符串示例代码

    这篇文章主要介绍了在JS中如何解析HTML字符串,需要的朋友可以参考下 在js中直接添加html语句,js会将html字符串解析成相应的HTML语句,并在前端进行显示. <span style="font ...
  18. js/jquery去掉空格,回车,换行示例代码

    js/jquery去掉空格,回车,换行示例代码.需要的朋友可以过来参考下,希望对大家有所帮助 Jquery:$("#accuracy").val($("#accuracy").va ...
  19. jQuery javaScript捕获回车事件(示例代码)

    jQuery javaScript捕获回车事件(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 function getEnter(obj,evt){ if(evt.keyCode == 13){ var ta ...