搜尋

首頁  >  文章  >  後端開發  >  在asp.net中使用JQuery Ajax相關用法總結

在asp.net中使用JQuery Ajax相關用法總結

巴扎黑
巴扎黑原創
2017-08-16 14:20:261745瀏覽

這篇文章主要介紹了詳解JQuery Ajax 在asp.net中使用總結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

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

先看看請求aspx的情況

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的字串才可以，例如“ d2a011ee392b74abe61e19d6296ea1e81233c1f76050803a65506838bd8f3a1544d」是可以的，「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 = "application/xml";
// 如果要是返回的响应为xml,返回的字符串必须是可以被解析的xml文档格式。
Response.Write("<my>123</my>");
Response.End();

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

前台：


$.ajax({
    type: "Post",
    url: "ResponsePage.aspx",
    // data: "{&#39;token&#39;:&#39;ajax&#39;}",// 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進行請求了。 、 請求aspx頁面後台中的方法，帶參數

前台：

#

 $.ajax({
    type: "Post",
    url: "ResponsePage.aspx/RequestMethod1",
    data:"{&#39;msg&#39;:&#39;hello&#39;}",
    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格式是这样的：

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

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


 [WebMethod]

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

 返回值：


<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">我是通过Post方式请求返回的xml</string>

红色部分是被请求方法返回的字符串，其他是自动添加的，所以在前台中通过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;

}

 返回的响应为：


<?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是通过Get方式请求返回的xml</my>

此时就可以通过$(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接口，一定要继承这个接口，否则会出错的。

以上是在asp.net中使用JQuery Ajax相關用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：介紹ASP.NET中的MVC如何從控制器傳遞資料到視圖下一篇：介紹ASP.NET中的MVC如何從控制器傳遞資料到視圖

相關文章

看更多