JQuery Ajax 在asp.net中的使用並呼叫後台實例講解

自從有了JQuery，Ajax的使用變的越來越方便了，但是使用中還是會或多或少的出現一些讓人短時間內痛苦的問題。本文暫時總結一些在使用JQuery Ajax中應該注意的問題，如有不恰當或不完善的地方，歡迎大家指正和補充。

本文將從Aja​​x請求aspx、ashx和asmx三種方式討論。

Aspx頁面的Ajax請求可以有兩種方式：

1、 透過使用get或post方法，傳遞頁面位址為url參數的值，並附帶一些標記參數，直接要求。這種方式的Ajax被一些人譽為“假的Ajax”，表面上沒有刷新頁面，其實後台的執行情況和刷新 頁面的效果是一樣的。

其實這種情況也可以請求頁面中的特定的方法，只要使用附帶的參數去判斷，就可以「請求」特定的方法了。

下面展示了使用兩種不同的方法請求兩個不同頁面的情況，只是摘抄了程式碼，具體的詳細程式碼可以在文章結尾下載。 

前台： 

// 直接请求页面的方式
        $(function () {
            /*
            $.get(
                "RequestPage.aspx",
                { "token": "ajax" },
                function (data) {
                $("#dataShow").text(data);
                }
            );*/
            $.ajax({
                type:"Post",
                url: "ResponsePage.aspx",
                // data: "{'token':'ajax'}",// 使用这种方式竟然无法传递参数，各位有知道原因的告诉一下啊。
                data:"token=ajax",
                success: function (data) {
                    $("#dataShow").text(data); 
                }
            });
        })

後台：

protected void Page_Load(object sender, EventArgs e)
{
  if (!this.IsPostBack)
   {
     if ((Request["token"]??"")=="ajax")
      {
         // 下面这些内从可以放在一个方法里，然后通过“token”标记去判断执行哪个方法。
                    Response.Write("我是直接请求aspx页面返回的文字！");
                    Response.End();
        }
     }
 }

以上請求回傳值都是字串也就是dataType為text或html類型。

如果要是希望請求回傳的資料是xml或json格式的，該怎麼辦呢？

如果要是xml格式的，需要加入一句Response.ContentType=」application/xml」；還有一點要注意的是Write中的內容必須是可以解析為xml的字串才可以，例如「123 」是可以的，「123」是不行的，因為傳回的訊息中responseXml等於null。如下圖：

前台：

$.ajax({
            type: "Post",
                url: "ResponsePage.aspx",
                // data: "{'token':'ajax'}",// 使用这种方式竟然无法传递参数，各位有知道原因的告诉一下啊。
                data: "token=ajax",
              // 不需要指定contentType，因为指定后返回的是整个页面的html，不知道为啥，请求解答啊。
                dataType: "xml",
                success: function (data) {
                    alert(data);
                },
                error: function (d, c,e) {
                    alert(e);  
                }
         });

後台：

 // 如果要是回傳的回應為xml，則必須這樣設定

Response.ContentType 回應為xml,傳回的字串必須是可以被解析的xml文檔格式。
Response.Write("123");
Response.End();

 如果是為json格式的，後台程式碼中Response.ContentType=”application/json」這句話可有可無，不影響傳回的值。但是Response.Write中的值一定要是json格式的，否則會有Invalid Json格式的錯誤。

前台：

$.ajax({
     type: "Post",
     url: "ResponsePage.aspx",
     // data: "{'token':'ajax'}",// data必须是一个{key：value}的形式，这是一个字符串，是不行的。
     // data:{token:"ajax"},// 这种方式也可行。
       data: "token=ajax",
     // 不需要指定contentType，因为jquery会自动添加contentType=“application/x-www-form-urlencode”。
       dataType: "json",
       success: function (data) {
         alert(data);
       },
       error: function (d, c,e) {
         alert(e);  
       }
 });

 記錄：如果直接請求一個頁面，如果data使用"{'token':'ajax'}"這種字串的形式，jquery是無法轉換為token=ajax的形式的。

jquery 文件中說，可以使用{key：value}形式的data請求頁面，此時jquery會自動添加contentType=“application/x-www-form-urlencode”，使傳入的data自動轉換為key= value的形式。

後台：

// 如果要是回傳的回應為xml，則必須這樣設定

Response.ContentType = "application/json";
// 如果要是傳回的回應為xml, 傳回的字串必須是可以被傳回的字串必須是可以被傳回的字串必須是可以被傳回的字串必須是可以被傳回的字串必須是可以被傳回的字串必須是可以被傳回解析的xml文檔格式。
Response.Write(“[123]");

Response.End();

2、 請求aspx頁面後台中的方法。

其實上面的直接請求頁面的方法中也跟介紹了一種請求頁面內方法的解決方案，那就是在前台的ajax中傳遞一個參數作為標記，比如上面的那個“token”，然後在後台的page_load裡面判斷token的值，依照值的不同執行不同的方法。以下要介紹的是直接執行頁面後台中的方法。

  （1）使用簡單get或post方法時，由於無法設定contentType和dataType所以即使請求的是頁面中的方法，最後請求的還是目前頁面，傳回的值仍舊是目前頁面的html內容。所以在請求        方法的時候，簡單方法還是不合適的。

    (2) 使用非簡單方法時，不管是post還是get，如果dataType為xml、text、htm，最後回傳的數值仍舊是整個html頁面的內容。所以如果要想到的值，還是設定dataType為“json”吧，不       要忘記還要設定contentType為“application/json;charset=utf-8”，不設定這個，json也是返不回來的。而且也必須確保後台的被請求的方法是static的，還有[webmethod]標         記，而且還必須是public的。

 前台：

$.ajax({
   type: "post",
   url: "RequestPage.aspx/RequestedMethod",
   contentType: "application/json;charset=utf-8",
   dataType: "json",
   success: function (res) {
     alert("success:"+res.d); // 注意这点后面要加个d才能获取字符串信息，至于为什么要加个d，你通过chrome看看返回的响应就知道了，O(∩_∩)O
   },
   error: function (xmlReq, err, c) {
     alert("error:" + err); }
});

後台： 

// 需要被Ajax请求的后台方法
[WebMethod]
[ScriptMethod(UseHttpGet=true)] // 如果要使用POST请求，去掉这个标记
public static string RequestedMethod()
{
   return "[123]";
}

 直接使用post是沒有問題的：

如果type改為「get」，則會出現「500錯誤內部」。錯誤訊息為：{"Message":"嘗試使用 GET 請求呼叫方法“RequestedMethod”，但不允許這樣做。

解决方法就是在后方法上再加一个标[ScriptMethod(UseHttpGet=true)]，ScriptMethod 在System.Web.Script.Services下.这样之后，就可以在前台通过Get方式请求了，但是如果加了这个标记之后，前台就不能用POST进行请求了。

3、 请求aspx页面后台中的方法，带参数

前台：

$.ajax({
     type: "Post",
     url: "ResponsePage.aspx/RequestMethod1",
     data:"{'msg':'hello'}",
     contentType: "application/json;charset=utf-8",// 这句可不要忘了。
     dataType: "json",
     success: function (res) {
       $("#dataShow").text("success:" + res.d); // 注意有个d，至于为什么通过chrome看响应吧，O(∩_∩)O。
     },
     error: function (xmlReq, err, c) {
       $("#dataShow").text("error:" + err);
      }
});

后台：

[WebMethod]public static string RequestMethod1(string msg)
{      
   return msg;
}

总体上带参数的方式和不带参数类似，不同点就是在使用ajax请求的时候，要传递一个data参数，注意这个data一定是一个json格式的字符串，否则就会报json错误的，具体为什么，因为你传递的contentType是application/json啊。

请求asmx（webservice）的情况

请求webservice的时候，主要是请求webservice中的方法，在请求之前不要忘记了代码开头的那段取消注释的提示“// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

// [System.Web.Script.Services.ScriptService]”

请求webservice中的方法的处理方式和请求aspx页面后台方法的处理方式类似，但也有一些不同。

被请求的webservice中方法的特点：

（1） 请求的方法必须是为public的。

（2） 方法必须有[WebMethod]标记。

（3） 如果想使用Get的方式请求，还要有[ScriptMethod(UseHttpGet=true)]标记。使用Get请求Webservice的方法的时候，只添加这个标记是不够的，还要修改Web.Config文件，让WebService支持Get方式请求，否则会出现 “因 URL 意外地以“/GetXmlByGet”结束，请求格式无法识别。“的错误。修改方法为：在System.web配置节下添加以下红色的内容：

<System.web>
……………
<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
</System.web>

（4） 请求xml数据类型的时候，要注意，如果方法返回的是string类型的，返回的xml格式是这样的：

如果方法返回的是字符串，则会把返回的字符串包装在标签中返回。

比如以下方法请求后的返回值：

[WebMethod]

public string GetXmlByPost()
{
   return "我是通过Post方式请求返回的xml ";
}

返回值：

我是通过Post方式请求返回的xml

红色部分是被请求方法返回的字符串，其他是自动添加的，所以在前台中通过jquery获取数据的时候，应该$(res).find(”string”).text();

如果方法返回的是xmlDocument对象，则就是方法中构造的xml对象。

比如以下方法请求后的返回值:

// 使用Get方式请求xml，注意返回的字符串一定要是可以解析的xml格式。

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public System.Xml. XmlDocument GetXmlByGet()
{
   string xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是通过Get方式请求返回的xml</my>";
    System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
   doc.LoadXml(xml);
   return doc;
}

返回的响应为：

我是通过Get方式请求返回的xml

此时就可以通过$(res).find(”my”).text()的方式取数据了。此时操作的完全是你自己构造的xml。

（5） 关于请求返回JSON需要注意的就是，返回的也是“[d:{}]”格式的数据，所在前台获取的时候，一定要加个”.d”，其他的和xml差不多了。

（6）Text的类型的就不多说了。

请求ashx的情况

请求ashx的时候和直接请求apsx页的情况类似，毕竟都是通过response.Write(string)的方式返回数据的。

需要注意的地方是：context.Response.ContentType的值，根据dataType的值区分：

Text：“text/plain“;

XML：“application/xml“;

JSON：“application/json“.

dataType为xml的时候，response.Write(string)中的字符串一定要符合xml的格式，为json的时候，response.Write(string)中的字符串一定要符合json的格式为否则会出现解析错误，这个和aspx页是一样的。

如果要使用session的话，在handler的代码中添加System.Web.SessionState的引用，并让这个handler继承IRequiresSessionState接口，一定要继承这个接口，否则会出错的。

下面来说明利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

1、无参数的方法调用

asp.net 代码：

using System.Web.Script.Services;   
[WebMethod]   
public static string SayHello()   
{        
      return "Hello Ajax!";   
}  
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{     
    return "Hello Ajax!";
}

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

JQuery 代码：

/// <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;   
    });   
});  
/// <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;
    });
});

2、带参数的方法调用

asp.net 代码：

using System.Web.Script.Services;   
[WebMethod]   
public static string GetStr(string str, string str2)   
{   
    return str + str2;   
}  
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
    return str + str2;
}

JQuery 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetStr",   
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字   
            data: "{&#39;str&#39;:&#39;我是&#39;,&#39;str2&#39;:&#39;XXX&#39;}",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                //返回的数据用data.d获取内容   
                  alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetStr",
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
            data: "{&#39;str&#39;:&#39;我是&#39;,&#39;str2&#39;:&#39;XXX&#39;}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //返回的数据用data.d获取内容
                  alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

3、返回数组方法的调用

asp.net 代码：

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;   
}  
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 代码：

/// <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;   
    });   
});  
/// <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;
    });
});

4、返回Hashtable方法的调用
asp.net 代码：

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;   
}  
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 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetHash",   
            //记得加双引号  T_T   
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",   
            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;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetHash",
            //记得加双引号  T_T
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",
            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;
    });
});

5、操作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>  
<?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 代码：

$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            url: "XMLtest.xml",   
            dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了   
            success: function(xml) {   
                //清空list   
                $("#list").html("");   
                //查找xml元素   KVM 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机
                $(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;   
    });   
});  
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            url: "XMLtest.xml",
            dataType: &#39;xml&#39;, //返回的类型为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;
    });
});