jQuery 中使用JSON的實現代碼

JSON 的格式說明可以在可以這裡看到，非常詳細，還是中文的。

JSON 格式說明

需要特別注意的是，在 JSON 中的屬性名稱是需要使用引號引起來的。

jQuery 中使用 JSON

jQuery 是現在使用廣泛的指令碼庫，那麼，在 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 中。 複製代碼 代碼如下:// Ajax 設定
$.ajaxSetup({ contentType: 'text/json' });
$("#wcfBtn").click(function () {
$.post("Service1.svc/Sum", $.toJSON({ x: 2, y: 3 }), function (data) {
alert(data.d);
});
});

伺服器端的配置
首先，為服務增加標籤：[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]複製代碼 代碼如下:// #1
// 為了在指令碼中使用,必須增加這個標籤
[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]
// #2
// 在網站的設定檔中也需要進行設定
public class Service1 : IService1
{
public int Sum(int x, int y)
{
return x + y;
}
}

然後，在網站的設定檔中，如下配置。 複製代碼 代碼如下:<system.serviceModel>
<!-- 為了支援在瀏覽器端調用 WCF 服務的特定配置 -->
<serviceHostingEnvironment aspNetCompatibilityEnabled="true">
<serviceActivations>
<!-- relativeAddress 服務的地址
service 實現服務的類型，全名，包含命名空間，甚至程式集
factory 是 WCF 系統提供，直接使用
-->
<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的例子
複製代碼 代碼如下:////////////1、在HTML中，有這樣一個表單：
<form method="post" name="searchform" id="searchform" method="/sek.go">
<input name="query" value="" type="text" id="query" />
<input type=”submit” value="查詢"></input>
</form>
////////////當然，要想在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標籤
2)、$(“”).val()意為要得到(“”)所選中屬性的值；
3)、在$.post()中，第一項參數是指定目標servlet，即要把本post請求發給的那個servlet。
第二項是本post請求所攜帶的資料；“:”前的為key或者name，後為value；
第三項是回呼函數，其內若有形參，則表示要對從servlet返回的值進行處理，這裡的callback的功能是將JSON對象json轉換成了JS對象userlist，然後將JS對象傳入函數userList
3、post請求攜帶了名為query的參數去了後台，在servlet中進行處理：
//從名為"query"能的參數中取出post帶過來的資料
String query = request.getParameter("query");
if (query != null && !query.isEmpty()
&& !query.trim().equalsIgnoreCase("")) {
//如果"query"的值不為空白，就用'query'為參數構建HQL語句
String hql = "from TUser as user where user.userName like '"+ query + "%'";
//到庫表TUser中進行查詢，並得到一個表結構
List list = weilav3TUserDAO.getListByHQL(hql);
if (list != null && !list.isEmpty()) {
//若list不為空白，則將其轉換成JSON對象，並存入jsonArray中
JSONArray jsonArray = JSONArray.fromObject(list);
//下面就是把存有查詢結果的JSON對象返給頁面
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonArray);
……
}else {……}
**************/