使用原生javascript和jQuery解析json数据
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
JSONM文件中包含了关于“名称”和“值”的信息。
有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现。
jQuery ajax - getJSON() 方法
语法:
jQuery.getJSON(url,data,success(data,status,xhr))
等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
一,jQuery.Ajax
json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合。
下面我总结jquery处理json数据方法。
1)$.each(...)
$('#button1').click(function(){
$.ajax({
type:"GET",
url:"data.txt",
dataType:"json",
success:function(data){ var string="<ul>";
//i表示在data中的索引位置,n表示包含的信息的对象
$.each(data,function(i,n){
//获取对象中属性为optionsValue的值
string+="<li>"+n["optionValue"]+"</li>";
});
string+="</ul>";
$('#result').append(string);
}
});
return false;
});
2)eval( data)
这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据:
$('#button2').click(function(){
$.ajax({
type:"GET",
url:"data.txt",
dataType:"json",
success:function(data){ var myObject = eval( data);
var string = '<table border = "1">';
string += "<caption align='top'>使用eval()解析数据</caption>"; string += "<tr><td>"+"optionKey"+"</td>";
string += "<td>"+"optionValue"+"</td></tr>"; for(var i = 0; i<myObject.length;i++){
string += "<tr><td>"+myObject[i].optionKey+"</td>";
string += "<td>"+myObject[i].optionValue+"</td></tr>";
}
string += '</table>'
$('#result').empty().append(string);
},
error : function() {
alert("抱歉!加载列表失败,请稍后重试!");
}
});
});
当中遇到一个小问题:Origin null is not allowed by Access-Control-Allow-Origin.
js文件中使用load()方法,而Chrome浏览器出于安全起见,不允许load本地文件
解决方法:http://www.windguo.com/javascript/261.html 或者直接只用IE8
使用原生javascript和jQuery解析json数据的更多相关文章
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- json数据的格式,JavaScript、jQuery读取json数据
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...
- 使用jQuery解析JSON数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments&quo ...
- 使用jQuery解析JSON数据(由ajax发送请求到php文件处理数据返回json数据,然后解析json写入html中呈现)
在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后 ...
- 深入分析jquery解析json数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...
- 使用jQuery解析JSON数据-已验证
本文来源于:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 上例中得到的JSON数据如下,是一个嵌套JSON: {&qu ...
- VBA中使用JavaScript脚本语言解析JSON数据
JSON:JavaScript 对象表示法(JavaScript Object Notation) 和xml相似,都是文本形式(保存在文本文件中或字符串等形式),比如: jsstr = {" ...
- JQuery解析json数据
<script> var data ="{" + "root:[" + "{name:'1',value:'0'}," + &q ...
随机推荐
- JS倒计时,自动提交表单!
<form id="frm" action="http://www.baidu.com"> 考试还剩余<div id="time&q ...
- JBPM4.4学习笔记
1.JBPM4表说明: JBPM4_DEPLOYMENT 流程定义表 JBPM4_DEPLOYPROP 流程定义属性表 JBPM4_EXECUTION 流程实例表 JBPM4_HIST_ACTINST ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- LUA upvalue使用陷阱一例
CA = {} CA.TestCb = function(self, cb) if not self._cb then self._cb = function() cb() end end self. ...
- C#与U3D中字符串尾0
static void TestChar0() {//注意字符串中0和\0的区别,如 s1="h0ello", s2 = "h\0ello" //s2中的\0是 ...
- iOS学习之iOS沙盒(sandbox)机制和文件操作之NSFileManager
我们看看NSFileManager如何使用.包括创建文件,目录,删除,遍历目录等. 1.在Documents里创建目录 创建一个叫test的目录,先找到Documents的目录, [cpp] view ...
- C6 P5.2
引用自 http://snippetinfo.net/media/117 下载源:php-5.2-x64.zip wget 源包.zip yum -y install httpd libXpm.so. ...
- Linux内核SPI支持概述
1. 什么是SPI? Serial Peripheral Interface是一种同步4线串口链路,用于连接传感器.内存和外设到微控制器.他是一种简单的事实标准,还不足以复杂到需要一份正式的规范.SP ...
- quartz简介
- sax解析xml文件,封装到对象中
创建User.java类 public class User { private String id; private String name; private String age; private ...