jQuery 中使用JSON的實(shí)現(xiàn)代碼

更新時(shí)間：2011年12月01日 22:46:38 作者：

json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式，在瀏覽器和服務(wù)器中之間的通訊可離不開(kāi)它

JSON 的格式說(shuō)明可以在可以這里看到，非常詳細(xì)，還是中文的。

JSON 格式說(shuō)明

需要特別注意的是，在 JSON 中的屬性名是需要使用引號(hào)引起來(lái)的。

jQuery 中使用 JSON

jQuery 是現(xiàn)在使用廣泛的腳本庫(kù)，那么，在 jQuery 中如何使用 JSON 呢？

解析 JSON

在 jQuery 中已經(jīng)提供了對(duì)于解析 JSON 的內(nèi)在支持，

jQuery.parseJSON 函數(shù)提供了解析的支持，詳細(xì)的說(shuō)明見(jiàn)這里。

復(fù)制代碼代碼如下:

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

使用對(duì)象生成 JSON 格式串

在 jQuery 中并沒(méi)有提供直接將普通的 JavaScript 對(duì)象轉(zhuǎn)換為 JSON 串的方法，可以使用下面的擴(kuò)展庫(kù)來(lái)完成。

jquery-json 擴(kuò)展庫(kù)

這個(gè)庫(kù)用來(lái)擴(kuò)展 jQuery ，對(duì)于 JSON 的使用，擴(kuò)展了兩個(gè)方法。

toJSON 方法用來(lái)將一個(gè)普通的 JavaScript 對(duì)象序列化為 JSON 串。

復(fù)制代碼代碼如下:

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

evalJSON 方法將一個(gè) JSON 串解析為一個(gè)普通的 JavaScript 對(duì)象。

復(fù)制代碼代碼如下:

 
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 

這個(gè)擴(kuò)展的下載地址：http://code.google.com/p/jquery-json/

使用 jQuery 配合 WCF
客戶(hù)端

jQuery 中的 $.post 可以直接向服務(wù)器發(fā)出請(qǐng)求，將服務(wù)器返回的數(shù)據(jù)按照 JSON 方式進(jìn)行解析，不過(guò)，需要注意下面幾點(diǎn)：

請(qǐng)求的內(nèi)容類(lèi)型必須為 json 格式，這可以通過(guò)上面的 jQuery-json 擴(kuò)展庫(kù)來(lái)完成，需要特別注意的在請(qǐng)求的 contentType 也必須使用 text/json 進(jìn)行說(shuō)明，默認(rèn)的 post 使用普通的名值對(duì)方式請(qǐng)求，因此 contentType 是： application/x-www-form-urlencoded，可以通過(guò) $.ajaxSetup 來(lái)進(jìn)行設(shè)置：

復(fù)制代碼代碼如下:

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

這樣，請(qǐng)求的內(nèi)容類(lèi)型就設(shè)置為需要的類(lèi)型。

其次，實(shí)際的請(qǐng)求內(nèi)容必須使用 JSON 方式，這可以通過(guò)擴(kuò)展庫(kù)的 $.toJSON 來(lái)實(shí)現(xiàn)，例如：

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

這樣，如果服務(wù)器端提供了一個(gè)服務(wù)方法 Sum，定義如下：

復(fù)制代碼代碼如下:

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

就可以如下調(diào)用了。注意，WCF 返回的數(shù)據(jù)在屬性 d 中。

復(fù)制代碼代碼如下:

 
// Ajax 設(shè)置 
$.ajaxSetup({ contentType: 'text/json' }); 
$("#wcfBtn").click(function () { 
$.post("Service1.svc/Sum", $.toJSON({ x: 2, y: 3 }), function (data) { 
alert(data.d); 
}); 
}); 

服務(wù)器端的配置
首先，為服務(wù)增加標(biāo)簽：[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

復(fù)制代碼代碼如下:

 
// #1 
// 為了在腳本中使用,必須增加這個(gè)標(biāo)簽 
[System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)] 
// #2 
// 在網(wǎng)站的配置文件中也需要進(jìn)行設(shè)定 
public class Service1 : IService1 
{ 
public int Sum(int x, int y) 
{ 
return x + y; 
} 
} 

然后，在網(wǎng)站的配置文件中，如下配置。

復(fù)制代碼代碼如下:

 
<system.serviceModel> 
<!-- 為了支持在瀏覽器端調(diào)用 WCF 服務(wù)的特定配置 --> 
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"> 
<serviceActivations> 
<!-- relativeAddress 服務(wù)的地址 
service 實(shí)現(xiàn)服務(wù)的類(lèi)型，全名，包含命名空間，甚至程序集 
factory 是 WCF 系統(tǒng)提供，直接使用 
--> 
<add relativeAddress="Service1.svc" service="MServer.Service1" factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" 
/> 
</serviceActivations> 
</serviceHostingEnvironment> 
<behaviors> 
<serviceBehaviors> 
<behavior name=""> 
<serviceMetadata httpGetEnabled="true" /> 
<serviceDebug includeExceptionDetailInFaults="false" /> 
</behavior> 
</serviceBehaviors> 
</behaviors> 
</system.serviceModel> 

jQuery使用JSON的例子

復(fù)制代碼代碼如下:

 
////////////1、在HTML中，有這樣一個(gè)表單： 
<form method="post" name="searchform" id="searchform" method="/sek.go"> 
<input name="query" value="" type="text" id="query" /> 
<input type=”submit” value="查詢(xún)"></input> 
</form> 
////////////當(dāng)然，要想在HTML中使用Js功能，必須在<head/>中加入 
<script type="text/javascript"src="/style/js/ajax.js"></script> 
////////////2、然后在ajax.js文件中加入如下代碼 
function userSearch(){ 
var query = $("#searchform input[@name='query']").val(); 
$.post("/userSearch.htm", { query: query } ,function callback(json){ 
var userlist = $.parseJSON(json); 
userList(userlist); 
}); 
} 
/******************************************* 
解釋如下： 
1)、"#searchform input[@name='query']"；的意思是： 選擇id為searchform其下的(name屬性值為'query'的)input標(biāo)簽 
2)、$(“”).val()意為要得到(“”)所選中屬性的值； 
3)、在$.post()中，第一項(xiàng)參數(shù)是指定目標(biāo)servlet，即要把本post請(qǐng)求發(fā)給的那個(gè)servlet。 
第二項(xiàng)是本post請(qǐng)求所攜帶的數(shù)據(jù)；“:”前的為key或者name，后為value； 
第三項(xiàng)是回調(diào)函數(shù)，其內(nèi)若有形參，則表示要對(duì)從servlet返回的值進(jìn)行處理，這里的callback的功能是將JSON對(duì)象json轉(zhuǎn)換成了JS對(duì)象userlist，然后將JS對(duì)象傳入函數(shù)userList 
3、post請(qǐng)求攜帶了名為query的參數(shù)去了后臺(tái)，在servlet中進(jìn)行處理： 
//從名為"query"能的參數(shù)中取出post帶過(guò)來(lái)的數(shù)據(jù) 
String query = request.getParameter("query"); 
if (query != null && !query.isEmpty() 
&& !query.trim().equalsIgnoreCase("")) { 
//如果"query"的值不為空，就用'query'為參數(shù)構(gòu)建HQL語(yǔ)句 
String hql = "from TUser as user where user.userName like '"+ query + "%'"; 
//到庫(kù)表TUser中進(jìn)行查詢(xún)，并得到一個(gè)表結(jié)構(gòu) 
List list = weilav3TUserDAO.getListByHQL(hql); 
if (list != null && !list.isEmpty()) { 
//若list不為空，則將其轉(zhuǎn)換成JSON對(duì)象，并存入jsonArray中 
JSONArray jsonArray = JSONArray.fromObject(list); 
//下面就是把存有查詢(xún)結(jié)果的JSON對(duì)象返給頁(yè)面 
response.setContentType("text/html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
out.println(jsonArray); 
…… 
}else {……} 
**************/ 