jQuery 中使用 JSON jQuery 中使用 JSON

jQuery 中使用 JSON

json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它。

JSON 的格式说明可以在可以这里看到，非常详细，还是中文的。

jQuery 中使用 JSON

jQuery 中使用 JSON JSON 格式说明

需要特别注意的是，在 JSON 中的属性名是需要使用引号引起来的。

jQuery 中使用 JSON

jQuery 是现在使用广泛的脚本库，那么，在 jQuery 中如何使用 JSON 呢？

jQuery 中使用 JSON

jQuery 中使用 JSON

解析 JSON

在 jQuery 中已经提供了对于解析 JSON 的内在支持，

jQuery.parseJSON 函数提供了解析的支持，详细的说明见这里。

var obj = jQuery.parseJSON('{"name":"John"}');  
alert( obj.name === "John" );

使用对象生成 JSON 格式串

在 jQuery 中并没有提供直接将普通的 JavaScript 对象转换为 JSON 串的方法，可以使用下面的扩展库来完成。

jquery-json 扩展库

这个库用来扩展 jQuery ，对于 JSON 的使用，扩展了两个方法。

toJSON 方法用来将一个普通的 JavaScript 对象序列化为 JSON 串。

var thing = {plugin: 'jquery-json', version: 2.3};    
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'

evalJSON 方法将一个 JSON 串解析为一个普通的 JavaScript 对象。

var thing = {plugin: 'jquery-json', version: 2.3};    
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'   
var name = $.evalJSON( encoded ).plugin; // "jquery-json"   
var version = $.evalJSON(encoded).version; // 2.3

这个扩展的下载地址：http://code.google.com/p/jquery-json/

使用 jQuery 配合 WCF

客户端

jQuery 中的 $.post 可以直接向服务器发出请求，将服务器返回的数据按照 JSON 方式进行解析，不过，需要注意下面几点：

请求的内容类型必须为 json 格式，这可以通过上面的 jQuery-json 扩展库来完成，需要特别注意的在请求的 contentType 也必须使用 text/json 进行说明，默认的 post 使用普通的名值对方式请求，因此 contentType 是： application/x-www-form-urlencoded，可以通过 $.ajaxSetup 来进行设置：

// Ajax 设置  
$.ajaxSetup({ contentType: 'text/json' });

这样，请求的内容类型就设置为需要的类型。

其次，实际的请求内容必须使用 JSON 方式，这可以通过扩展库的 $.toJSON 来实现，例如：

$.toJSON({ x: 2, y: 3 })

这样，如果服务器端提供了一个服务方法 Sum，定义如下：

public int Sum(int x, int y)  
{  
return x + y;  
}

就可以如下调用了。注意，WCF 返回的数据在属性 d 中。

1 // Ajax 设置  
2 $.ajaxSetup({ contentType: 'text/json' });  
3 
4 $("#wcfBtn").click(function () {  
5     $.post("Service1.svc/Sum", $.toJSON({ x: 2, y: 3 }), function (data) {  
6         alert(data.d);  
7     });  
8 });

服务器端的配置

首先，为服务增加标签：[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

 1 // #1  
 2 // 为了在脚本中使用,必须增加这个标签  
 3 [System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
 4     RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]  
 5 
 6 // #2  
 7 // 在网站的配置文件中也需要进行设定  
 8 public class Service1 : IService1  
 9 {  
10     public int Sum(int x, int y)  
11     {  
12         return x + y;  
13     }  
14 }

然后，在网站的配置文件中，如下配置。

 1 <system.serviceModel>  
 2   <!-- 为了支持在浏览器端调用 WCF 服务的特定配置 -->  
 3   <serviceHostingEnvironment aspNetCompatibilityEnabled="true">  
 4     <serviceActivations>  
 5 
 6       <!-- relativeAddress 服务的地址  
 7            service 实现服务的类型，全名，包含命名空间，甚至程序集  
 8            factory 是 WCF 系统提供，直接使用  
 9       -->  
10 
11       <add relativeAddress="Service1.svc" service="MServer.Service1"  factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"   
12            />  
13     </serviceActivations>  
14   </serviceHostingEnvironment>  
15 
16     <behaviors>  
17         <serviceBehaviors>  
18             <behavior name="">  
19                 <serviceMetadata httpGetEnabled="true" />  
20                 <serviceDebug includeExceptionDetailInFaults="false" />  
21             </behavior>  
22         </serviceBehaviors>  
23     </behaviors>  
24 </system.serviceModel>