先來個簡單的實例熱熱身吧。javascript
一、無參數的方法調用html
asp.net code:java
- using System.Web.Script.Services;
-
- [WebMethod]
- public static string SayHello()
- {
- return "Hello Ajax!";
- }
注意:1.方法必定要靜態方法,並且要有[WebMethod]的聲明jquery
JQuery code:ajax
- /// <reference path="jquery-1.4.2-vsdoc.js"/>
- $(function() {
- $("#btnOK").click(function() {
- $.ajax({
- //要用post方式
- type: "Post",
- //方法所在頁面和方法名
- url: "data.aspx/SayHello",
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function(data) {
- //返回的數據用data.d獲取內容
- alert(data.d);
- },
- error: function(err) {
- alert(err);
- }
- });
-
- //禁用按鈕的提交
- return false;
- });
- });
結果:json

二、帶參數的方法調用數組
asp.net code:app
- using System.Web.Script.Services;
-
- [WebMethod]
- public static string GetStr(string str, string str2)
- {
- return str + str2;
- }
JQuery code:asp.net
- /// <reference path="jquery-1.4.2-vsdoc.js"/>
- $(function() {
- $("#btnOK").click(function() {
- $.ajax({
- type: "Post",
- url: "data.aspx/GetStr",
- //方法傳參的寫法必定要對,str爲形參的名字,str2爲第二個形參的名字
- data: "{'str':'我是','str2':'XXX'}",
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function(data) {
- //返回的數據用data.d獲取內容
- alert(data.d);
- },
- error: function(err) {
- alert(err);
- }
- });
-
- //禁用按鈕的提交
- return false;
- });
- });
運行結果:函數

下面進入高級應用羅
三、返回數組方法的調用
asp.net code:
- using System.Web.Script.Services;
-
- [WebMethod]
- public static List<string> GetArray()
- {
- List<string> li = new List<string>();
-
- for (int i = 0; i < 10; i++)
- li.Add(i + "");
-
- return li;
- }
JQuery code:
- /// <reference path="jquery-1.4.2-vsdoc.js"/>
- $(function() {
- $("#btnOK").click(function() {
- $.ajax({
- type: "Post",
- url: "data.aspx/GetArray",
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function(data) {
- //插入前先清空ul
- $("#list").html("");
-
- //遞歸獲取數據
- $(data.d).each(function() {
- //插入結果到li裏面
- $("#list").append("<li>" + this + "</li>");
- });
-
- alert(data.d);
- },
- error: function(err) {
- alert(err);
- }
- });
-
- //禁用按鈕的提交
- return false;
- });
- });
運行結果:

四、返回Hashtable方法的調用
asp.net code:
- using System.Web.Script.Services;
- using System.Collections;
-
- [WebMethod]
- public static Hashtable GetHash(string key,string value)
- {
- Hashtable hs = new Hashtable();
-
- hs.Add("www", "yahooooooo");
- hs.Add(key, value);
-
- return hs;
- }
JQuery code:
- /// <reference path="jquery-1.4.2-vsdoc.js"/>
- $(function() {
- $("#btnOK").click(function() {
- $.ajax({
- type: "Post",
- url: "data.aspx/GetHash",
- //記得加雙引號 T_T
- data: "{ 'key': 'haha', 'value': '哈哈!' }",
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function(data) {
- alert("key: haha ==> "+data.d["haha"]+"/n key: www ==> "+data.d["www"]);
- },
- error: function(err) {
- alert(err + "err");
- }
- });
-
- //禁用按鈕的提交
- return false;
- });
- });
運行結果:

五、操做xml
XMLtest.xml:
- <?xml version="1.0" encoding="utf-8" ?>
- <data>
- <item>
- <id>1</id>
- <name>qwe</name>
- </item>
- <item>
- <id>2</id>
- <name>asd</name>
- </item>
- </data>
JQuery code:
- $(function() {
- $("#btnOK").click(function() {
- $.ajax({
- url: "XMLtest.xml",
- dataType: 'xml', //返回的類型爲XML ,和前面的Json,不同了
- success: function(xml) {
- //清空list
- $("#list").html("");
- //查找xml元素
- $(xml).find("data>item").each(function() {
- $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");
- $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");
- })
- },
- error: function(result, status) { //若是沒有上面的捕獲出錯會執行這裏的回調函數
- alert(status);
- }
- });
-
- //禁用按鈕的提交
- return false;
- });
- });
運行結果:
