JQuery調(diào)用WebServices的方法和4個實例
更新時間：2014年05月06日 08:49:08 作者：
你是不是經(jīng)常作這種開發(fā)，前端用JS寫邏輯，后端用aspx或者ashx作服務(wù)？你是不是經(jīng)常在請求aspx的時候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？
你甚至為每個ajax請求添加一個后端頁面！
你是不是甚至在想，尼瑪，要是能夠直接調(diào)用C#類文件中的方法就爽了？?。ㄟ@里FishLi做了一個框架，有興趣可以去看看）
可是，你大概忘記了，我們是程序員，我們是懶惰的，我們要讓電腦給我們干更多的事情?。ㄟ@里裝裝13），但其實，微軟和JQuery大牛們早幫我們解決了這個小問題。
大致的調(diào)用分為以下幾種：
一、無參數(shù) 有返回值的調(diào)用
前端JS代碼:
復(fù)制代碼 代碼如下:
$("#btn1").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/HelloWorld",
data: "{}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
});
后端WebMethod代碼：
復(fù)制代碼 代碼如下:
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
用谷歌調(diào)試的結(jié)果：
二、簡單參數(shù) 簡單返回值的調(diào)用
前端JS代碼：
復(fù)制代碼 代碼如下:
$("#btn2").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/SimpleReturns",
data: "{name:'張三'}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
});
后端WebMethod代碼：
復(fù)制代碼 代碼如下:
[WebMethod]
public string SimpleReturns(string name)
{
return String.Format("您的姓名是{0}", name);
}
用谷歌調(diào)試的結(jié)果：
三、 復(fù)雜參數(shù) 復(fù)雜返回值的調(diào)用
前端JS代碼：
復(fù)制代碼 代碼如下:
$("#btn3").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/GetStudentList",
data: "{stu:{ID:'6',Name:'ff'}}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
});
后端WebMethod：
復(fù)制代碼 代碼如下:
[WebMethod]
public List<Student> GetStudentList(Student stu)
{
List<Student> studentList = new List<Student>
{
new Student{ID=1,Name="張三"},
new Student{ID=2,Name="李四"}
};
//把從客戶端傳來的實體放回到返回值中
studentList.Add(stu);
return studentList;
}
用谷歌調(diào)試的結(jié)果：
四、返回匿名對象的WebMethod的調(diào)用
前端JS代碼：
復(fù)制代碼 代碼如下:
$("#btn4").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/ReturnNoNameClass",
data: "{}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("調(diào)用出錯" + error.responseText);
}
});
});
后端WebMethod代碼：
復(fù)制代碼 代碼如下:
[WebMethod]
public object ReturnNoNameClass()
{
return new { ID = 1, Name = "張三" };
}
用谷歌調(diào)試的結(jié)果：
哈哈，到這里，你是不是也覺得so easy,媽媽再也不用擔(dān)心我的學(xué)習(xí)了，其實很多東西都很簡單，但沒人告訴我們，而我們自己在實際開發(fā)中又沒有這種需求，所以給我們的開發(fā)造成了一定的障礙，
所以，交流啊，是多么滴重要！
相關(guān)文章
jQuery使用after()方法在元素后面添加多項內(nèi)容的方法
這篇文章主要介紹了jQuery使用after()方法在元素后面添加多項內(nèi)容的方法,實例分析了jQuery中after方法的功能及在元素后面添加內(nèi)容的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了validform表單驗證的實現(xiàn)方法，validform插件主要把所有的驗證條件和驗證提示信息綁定到每個表單元素，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
教你用jquery實現(xiàn)iframe自適應(yīng)高度
iframe因為能和網(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分數(shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時候多了也不好，少了更是不行，今天我們就來分享2種使用jquery實現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06
這篇文章主要介紹了jQuery表單選擇器用法以及相關(guān)知識點內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-08-08
jQuery Mobile的loading對話框顯示/隱藏方法分享
jQuery Mobile提供兩個方法，使得開發(fā)者在編寫JavaScript業(yè)務(wù)編輯時，可以隨意的控制loading提示框2013-11-11
jQuery建立一個按字母順序排列的友好頁面索引(兼容IE6/7/8)
很多人熟悉使用錨鏈接跳轉(zhuǎn)到的頁面部分的解決方案,這種效果當(dāng)需要列出很長的數(shù)據(jù)集時，是非常實用的,然而頁面跳轉(zhuǎn)對于游客來說有時候并不是好友好，弊端我就不多說了，祥看下本文2013-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)淡入淡出輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery 隔行換色 支持鍵盤上下鍵，按Enter選定值2009-08-08
本篇文章主要介紹了Jquery-data的三種用法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了jQuery超簡單遮罩層實現(xiàn)方法,結(jié)合實例形式詳細分析了jQuery遮罩層相關(guān)屬性樣式動態(tài)控制操作技巧,需要的朋友可以參考下2018-09-09