JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,也独立于平台。
JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“Test”:”abc”},对象的值是键值对的形式(key:value)。
“[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“Test”:”abc”,”Test”:”123”]。
若是对象数组,那就是这样:[{“Test”:”abc”},{“Test”:”123”}]
其实数组也是一个对象,上面的格式也可以写成这样:{“MyTest”:[{“Test”:”abc”},{“Test”:”123”}]}
这表示一个MyTest对象,他有两个子数据,每个子数据也是一个对象,每个子对象都是Test。
JSON中字符串和字符的定义格式和一般的类C语言定义是类似的,双引号定义字符串,单引号定义字符。
JSON的键(Key)用双引号括起来,比如上面的“MyTest“和”Test“,
都是用双引号括起来的,在一些语言中构造JSON字符串的时候,可以使用转义字符转义双引号。
一、区分JSON字符串和JSON对象
JSON字符串:
<span style="white-space:pre"> </span>Var strJSON = “{“MyTest”:[{“Test”:”abc”},{“Test”:”123”}]}”<span style="line-height: 2em; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);">,或</span><span style="line-height: 2em; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"> </span>
<span style="white-space:pre"> </span>Var strJSON = ‘{“MyTest”:[{“Test”:”abc”},{“Test”:”123”}]}’<span style="line-height: 2em; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);">,</span>
由于在Js中单引号和双引号都可以表示一个字符串,所以上面第一个使用双引号和第二个使用单引号的都表示一个JSON字符串。
JSON对象:
<span style="white-space:pre"> </span>Var JSON = {“MyTest”:[{“Test”:”abc”},{“Test”:”123”}]},
JSON对象最外面是没有单引号或者双引号的,这就表示一个JSON对象。
二、下面使用字符串作为输入进行简单说明JSON的使用
创建包含 JSON 语法的 JavaScript 字符串:
① 字符串里是对象数组
<span style="white-space:pre"> </span>var txt = '{ "student1" : [' +
<span style="white-space:pre"> </span>'{ "firstName":"John" , "lastName":"Doe" },' +
<span style="white-space:pre"> </span>'{ "firstName":"Anna" , "lastName":"Smith" },' +
<span style="white-space:pre"> </span>'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
是字符串的时候就要用eval需要转化,由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 J
avaScript 对象。eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能
避免语法错误:
var jsObj = eval ("(" + txt + ")");<span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"> </span>
在网页中使用 JavaScript 对象:
<span style="white-space:pre"> </span><p>
First Name: <span id="firstName"></span><br />
Last Name: <span id="lastName"></span><br />
</p>
<span style="white-space:pre"> </span><script>
<span style="white-space:pre"> </span> document.getElementById("firstName").innerHTML = jsObj.student1[1].firstName
document.getElementById("lastName").innerHTML = jsObj.student1[1].lastName
</script>
或者
<span style="white-space:pre"> </span><script>
$("#firstName").text(jsObj.student1[1].firstName );
$("#lastName").text(jsObj.student1[1].firstName );
</script>
② 字符串里是对象
<script>
var txt = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}';
var jsObj = eval ("(" + txt + ")");
$.each(jsObj,function(idx,item){
alert(item.id + " " + item.name);
})
</script>
三、下面使以对象作为输入进行简单说明JSON的使用
<span style="white-space:pre"> </span>var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
是JSON对象的时候就要不需要转化了
<span style="white-space:pre"> </span>$.each(arr,function(idx,item){
<span style="white-space:pre"> </span> alert(item.id + " " + item.name);
<span style="white-space:pre"> </span>})
四、使用AJAX 及JSON实现网页异步更新的使用
使用ajax向后天请求数据,并返回JSON时的处理方式
<span style="white-space:pre"> </span><p>
First Name: <span id="class_name_view"></span><br />
</p>
<span style="white-space:pre"></span><span style="white-space:pre"> </span><script>
<span style="white-space:pre"> </span> $.ajax({
type: "post",
url:'testWxShare!getWxShareById.action',
dataType: "json",
async:false,
success: function (data) {
<span style="white-space:pre"> </span>$("#class_name_view").val(data[0].stuData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
<span style="white-space:pre"> </span>alert(errorThrown);
}
});
<span style="white-space:pre"> </span></script>
后台传入的数据:
<span style="white-space:pre"> </span>Response.Clear();
<span style="white-space:pre"> </span>Response.Write("[{"stuData":"This Is a Student Data"}]");
<span style="white-space:pre"> </span>Response.Flush();
<span style="white-space:pre"> </span>Response.End();
这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,
而并非字符串数据,如data[0].stuData,这里就直接使用了这个json对象数据