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