JSON 在 JQuery和ajax 的运用

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对象数据