DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 中使用JSON的實現代碼
jQuery 中使用JSON的實現代碼
編輯:JQuery特效代碼     

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 {……}
**************/

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved