淺談對Jquery+JSON+WebService的使用小結
Jquery作為一款優(yōu)秀的JS框架,簡單易用的特性就不必說了。在實際的開發(fā)過程中,使用JQ的AJAX函數(shù)調(diào)用WebService
的接口實現(xiàn)AJAX的功能也成了一種比較普遍的技術手段了。WebService接口的實現(xiàn),通常都是由OOP語言實現(xiàn)的。所以
在WebService的接口函數(shù)中,難免可能會遇到除了簡單數(shù)據(jù)類型的復雜數(shù)據(jù)類型。復雜的數(shù)據(jù)的數(shù)據(jù)類型機有可能是
WebService接口中的參數(shù),也有可能是WebService的返回值。本文所敘述的要點為:
1、對于WebService接口復雜類型的參數(shù),JQ調(diào)用的時候傳入的JSON數(shù)據(jù)應該如何表示。?
2、JQ對WebService調(diào)用獲取JSON數(shù)據(jù)類型。
3、JQ調(diào)用的時對Webservice返回的復雜數(shù)據(jù)類型有什么樣要求。?
環(huán)境:JQ版本:1.4.2、VS2008 SP1。
測試一:對于WebService簡單參數(shù)類型:
WebService接口函數(shù)代碼如下:
[WebMethod(Description = "測試方法")]
public string ProcessPersonalInfo(Person person)
{
return person.Name + person.Tel;
}
JQ調(diào)用代碼如下:
$.ajax({
type: "POST",
url: "WebService1.asmx/GetString",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{'name':'zhangsan'}",
success: function(json) { alert(json.d) },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
提示:在$.ajax函數(shù)中,data必須要以字符串的形式表示JSON,而不能直接用JSON數(shù)據(jù)傳進去??赡苡行┡笥褜SON對象和JSON對象的字符串
不大好區(qū)分,其實,字符串類似C#里用“”引起來的東西,而JSON對象是直接寫在{}中的。簡單的測試方法是直接通過alert函數(shù)彈出,如果顯示[object:object]
則為JSON對象,否則就是一個字符串。
結果如下圖:


測試二:對于WebService復雜參數(shù)類型:
WebService接口函數(shù)代碼如下:
[WebMethod(Description = "測試方法")]
public string ProcessPersonalInfo(Person person)
{
return person.Name + person.Tel;
}
Person實體:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Address { get; set; }
public string Tel { get; set; }
}
JQ調(diào)用代碼如下:
$.ajax({
type: "POST",
url: "WebService1.asmx/ProcessPersonalInfo",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}",
success: function(json) { alert(json.d) },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
結果如下圖:


調(diào)用過程與簡單參數(shù)類型類似,就是通過在JS中用一個表示Person的person對象的字符串,發(fā)往客戶端后,WebService會自動將person對象的字符串
轉(zhuǎn)換為Person實體對象。
測試三:對于WebService復雜返回類型
WebService接口函數(shù)代碼如下:
[WebMethod(Description = "測試方法")]
public List<Person> GetPersonalList()
{
List<Person> persons = new List<Person>
{
new Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866"}
};
return persons;
}<BR> JQ調(diào)用代碼如下:
$.ajax({
type: "POST",
url: "WebService1.asmx/GetPersonalList",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
如下圖:

也就是說對于復雜返回類型,處理方式也是簡單類型基本上是一樣的。
曾聽到有一種觀念認為,Jq調(diào)用時WebSevice,用JSON作為數(shù)據(jù)交互格式時,返回數(shù)據(jù)類型一定是可序列化的。真的是這樣嗎。?
.Net的基本數(shù)據(jù)類型確實是可序列化的,這一點沒有疑問。那么List<T>數(shù)據(jù)類型是否可以序列化呢。?看看List<T>的元數(shù)據(jù)(Metadata)信息
就知道了。。
[DebuggerTypeProxy(typeof (Mscorlib_CollectionDebugView<T>))]
[DebuggerDisplay("Count = {Count}")]
[Serializable]
public class List<T> : IList<T>, ICollection<T>, IEnumerable<T>, IList, ICollection, IEnumerable
{
/**/
}
如果上面的說法成立,在這種情況下,調(diào)用成功也無可厚非。但是問題真是這樣嗎。?下面繼續(xù)測試一下:
測試四:對于WebService復雜返回類型
[WebMethod(Description = "測試方法")]
public Person GetPerson()
{
Person person = new Person {<BR> Address = "beijing", Age = 27, <BR> Name = "zhangshan", Tel = "01082678866" <BR> };
return person;
}
JQ調(diào)用代碼如下:
$.ajax({
type: "POST",
url: "WebService1.asmx/GetPerson",
dataType: "json",
contentType: "application/json; charset=utf-8",
//data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}",
success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
如下圖:

但是測試四中,GetPerson()方法返回Person數(shù)據(jù)類型。再看看Person實體的定義,根本就沒有標記問可序列化。
由結果可知:JQ調(diào)用WebService,并不一定需要返回復雜類型的數(shù)據(jù)必須是可序列化的。
下面做一個有趣的測試。大家都知道WebService的返回類型不能為Hashtable類型。因為它實現(xiàn)了因為它實現(xiàn) IDictionary接口。
測試五:對于WebService復雜返回類型
[WebMethod(Description = "測試方法")]
public Hashtable GetPersonalHashtable()
{
Hashtable hashtable = new Hashtable();
Person person = new Person { Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866" };
hashtable.Add(1, person);
return hashtable;
}
JQ調(diào)用代碼如下:
$.ajax({
type: "POST",
url: "WebService1.asmx/GetPersonalHashtable",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function(json) { $(json.d).each(function() { alert(this["one"].Name) }) },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});



這樣,Jq居然能調(diào)用成功。這點是有點讓人意想不到的。
總結:
1、Jq與WebService之間以JSON作為數(shù)據(jù)交換形式的時候,contentType: "application/json; charset=utf-8"是必須指定的。
要不然WebService不知道以何種數(shù)據(jù)作為轉(zhuǎn)換。
2、Jq調(diào)用WebService返回復雜數(shù)據(jù)類型并不一定需要類型為可序列化。
3、WebService返回的JSON數(shù)據(jù)通過".d"獲取如上面測試中的alert(json.d)
- jQuery調(diào)用WebService返回JSON數(shù)據(jù)及參數(shù)設置注意問題
- 排除JQuery通過HttpGet調(diào)用WebService返回Json時“parserror”錯誤
- jQuery結合Json提交數(shù)據(jù)到Webservice,并接收從Webservice返回的Json數(shù)據(jù)
- asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼
- 用Jquery訪問WebService并返回Json的代碼
- jQuery調(diào)用Webservice傳遞json數(shù)組的方法
相關文章
ASP.NET用SignalR建立瀏覽器和服務器的持久連接詳解
這篇文章主要給大家介紹了ASP.NET用SignalR如何建立瀏覽器和服務器的持久連接,文章先給大家簡單介紹了配置環(huán)境,而后通過實戰(zhàn)來給大家詳細的介紹了實現(xiàn)的過程,文中通過一步步的步驟介紹的很詳細,感興趣的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12
ASP.Net WebAPI與Ajax進行跨域數(shù)據(jù)交互時Cookies數(shù)據(jù)的傳遞
本文主要介紹了ASP.Net WebAPI與Ajax進行跨域數(shù)據(jù)交互時Cookies數(shù)據(jù)傳遞的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
用C#中的params關鍵字實現(xiàn)方法形參個數(shù)可變
個人認為,提供params關鍵字以實現(xiàn)方法形參個數(shù)可變是C#語法的一大優(yōu)點。在方法形參列表中,數(shù)組類型的參數(shù)前加params關鍵字,通常可以在調(diào)用方法時代碼更加精練2012-01-01

