快捷導(dǎo)航

JQuery調(diào)用WebServices的方法和4個(gè)實(shí)例

更新時(shí)間：2014年05月06日 08:49:08 作者：

你是不是經(jīng)常作這種開(kāi)發(fā)，前端用JS寫(xiě)邏輯，后端用aspx或者ashx作服務(wù)？你是不是經(jīng)常在請(qǐng)求aspx的時(shí)候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn&param1=1&param2=2的字符串？

你甚至為每個(gè)ajax請(qǐng)求添加一個(gè)后端頁(yè)面！
你是不是甚至在想，尼瑪，要是能夠直接調(diào)用C#類文件中的方法就爽了？！（這里FishLi做了一個(gè)框架，有興趣可以去看看）
可是，你大概忘記了，我們是程序員，我們是懶惰的，我們要讓電腦給我們干更多的事情?。ㄟ@里裝裝13），但其實(shí)，微軟和JQuery大牛們?cè)鐜臀覀兘鉀Q了這個(gè)小問(wèn)題。

大致的調(diào)用分為以下幾種：

一、無(wú)參數(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="李四"}
            };
            //把從客戶端傳來(lái)的實(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é)果：

哈哈，到這里，你是不是也覺(jué)得so easy,媽媽再也不用擔(dān)心我的學(xué)習(xí)了，其實(shí)很多東西都很簡(jiǎn)單，但沒(méi)人告訴我們，而我們自己在實(shí)際開(kāi)發(fā)中又沒(méi)有這種需求，所以給我們的開(kāi)發(fā)造成了一定的障礙，
所以，交流啊，是多么滴重要！

您可能感興趣的文章: