jquery.ajax請求aspx和ashx的異同 Jquery Ajax調用aspx頁面方法

標籤：參數詳解   www   hello   let   news   send   命名空間   post方法   .com   

1.jquery.ajax請求aspx

請求aspx的靜態方法要注意一下問題：

  （1）aspx的後台方法必須靜態，而且添加webmethod特性

  （2）在ajax方法中contentType必須是“application/json”，

  （3）data傳遞的資料必須是嚴格的json資料，如"{‘a‘:‘aa‘,‘b‘:‘bb‘}"，而且參數必須和靜態方法的參數一 一對應

  （4）aspx的後台方法返回的資料預設形式是“{‘d‘:‘返回的內容‘}”,所以如果dataType指定為"json"必須通過data.d來擷取返回資料

在webfrom頁面中後台定義要求方法(方法必須靜態,而且必須添加WebMethod特性)

[WebMethod]public static string GetString(string str_a,string str_b){    return str_a+str_b;}

前台頁面請求

$(function(){$.jax({      url:‘default.aspx/GetString‘,      type:‘post‘,      contentType:‘application/json‘,//這裡必須指明要傳遞到伺服器的內容的編碼方式，而且必須是json,否則後台方法擷取不到傳遞資料。      dataType:‘json‘,//用戶端以json的方式去讀取返回資料      data:‘{‘str_a‘:‘aaa‘,‘str_b‘:‘bbbb‘}‘,//參數必須和背景參數名稱一樣 data必須傳遞json格式的資料      success:function(result){              alert(result.d);//因為webmethod的方法預設返回的資料格式是json的格式而且資料格式如："{‘d‘:‘返回的資料‘}",所以要通過.d來擷取返回的內容。                              }     });});

2.請求ashx

 注意問題：

（1）ajax方法中的contentType如果指定必須指定為“application/x-www-form-urlencoded”,否則在ashx中request.form擷取不到資料

（2）如果dataType為json，想要jQuery自動解析json資料，ashx必須返回嚴格的json資料，而且必須是雙引號(用反義字元去反義)的格式，如: context.Response.Write("{\"d\":\"Hello World\"}")，否則jquery會解析json失敗。

（3）如果因為contentType未設定或者不是“application/x-www-urlencoded”類型，reque.form擷取不到資料，可以通過context.Request.InputStream來擷取請求內容。

（4）在請求ashx中data參數有這幾種形式： data:{‘a‘:‘aa‘,‘b‘:‘bb‘}, data:"a=aa&b=bb",data:{a:‘aa‘,b:‘bb‘},這三種資料都可以通過request.form[""]來擷取到。

 

 

Jquery Ajax調用aspx頁面方法

 

在asp.net webform開發中，用jQuery ajax傳值一般有幾種玩法

1）普通玩法：通過一般處理常式ashx進行處理；

2）進階玩法：通過aspx.cs中的靜態方法+WebMethod進行處理；

3）文藝玩法：通過WCF進行處理。

第一種和第三種方法不在本文介紹範圍之內，下面重點介紹第二種方法。

說明

在我們的印象裡 asp.net的Web服務是以.asmx來結尾的，而我們現在的asp.net也能實現Web服務，這是因為預設Web.config中已經添加了System.Web.Handlers.ScriptModule，它是用於管理asp.net中ajax功能的HTTP模組，這樣不管使用者是請求.asmx檔案還是.aspx檔案，都會通過此處理常式來處理請求。

後台代碼：

using System.Web.Services; //引入命名空間[WebMethod]public static string SayHello(){    return "Hello Ajax!";}

前台頁面代碼：

<button id="btn">提交</button>

Javascript代碼：

$(function() {         $("#btn").click(function() {             $.ajax({                          type: "post", //要用post方式                             url: "/Demo.aspx/SayHello",//方法所在頁面和方法名            contentType: "application/json; charset=utf-8",                 dataType: "json",                 success: function(data) {                                    alert(data.d);//返回的資料用data.d擷取內容            },            error: function(err) {                     alert(err);                 }             });    });     });

 

效果：

需要注意的地方

一、data參數寫法

//1）普通寫法，JSON索引值對，如：單個參數的data:"{newsID:"+ id +"}",//多個參數的形式：data:"{newsID:"+ newsID +",name:"+ name +"}",//2）文藝寫法：各種引號，雙引號，單引號拼接，如//單個參數寫法：data:"{‘name‘:‘"+ name +"‘}",//多個參數寫法：data: "{‘content‘:‘" + $("#content").val() + "‘,‘createTime‘:‘" + $("#createTime").val() + "‘,‘creator‘:‘" + $("#creator").val() + "‘}"//容易出錯！！！！！

二、用QueryString傳值是後台取不到的問題

在WebMethod()方法中，是不能通過 HttpContext.Current.QueryString.Get("id")來擷取query string，因為在WebMethod()預設是用POST方法提交的，而用GetQueryString是不能取到值的。替代方法是用JS擷取url中的參數，用ajax提交給後台方法是用：   <script src="/js/jquery-1.11.3.js"></script>

< script type = "text/javascript" >    function getArgs(strParame) {        var args = new Object();        var query = location.search.substring(1); // Get query string        var pairs = query.split("&"); // Break at ampersand        for (var i = 0; i < pairs.length; i++) {            var pos = pairs[i].indexOf(‘=‘); // Look for "name=value"            if (pos == -1) continue; // If not found, skip            var argname = pairs[i].substring(0, pos); // Extract the name            var value = pairs[i].substring(pos + 1); // Extract the value            value = decodeURIComponent(value); // Decode it, if needed            args[argname] = value; // Store as a property        }        return args[strParame]; // Return the object} < /script>

三、時間問題

WCF 或 類比Web服務處理JSON時返回時間格式問題。解決方案如下：// 雜亂的時間var rawDate = "/Date(1347120000000+0800)/";// 提取時間字串var strDate = rawDate.substr(6, 13);// 把時間字串轉化成int類型var intDate = parseInt(strDate);// 構造一個Date對象var newDate = new Date(intDate);// 將時間轉化成當地時間格式var myDate = newDate.toLocaleDateString();// 最終結果alert(myDate);// 合并成一句var resultDate = new Date(parseInt("/Date(1347120000000+0800)/".substr(6, 13))).toLocaleDateString();

四、$.ajax參數詳解

//標準的寫法：$.ajax({     type: "post",     dataType: "json",     contentType: "application/json", //注意：WebMethod()必須加這項，否則用戶端資料不會傳到服務端     data:{如上所述},//注意：data參數可以是string個int類型     url: "List.aspx/DeleteNews",//類比web服務，提交到方法     // 可選的 async:false,阻塞的非同步就是同步     beforeSend:function(){          // do something.          // 一般是禁用按鈕等防止使用者重複提交          $("#btnClick").attr({disabled:"disabled"});          // 或者是顯示loading圖片     },     success: function (data) {          alert("success: " + data.d);//注意這裡：必須通過data.d才能擷取到伺服器返回的值          // 服務端可以直接返回Model，也可以返回序列化之後的字串，如果需要還原序列化：string json = JSON.parse(data.d);          // 有時候需要嵌套調用ajax請求，也是可以的     },     complete: function(){          //do something.          $("#btnClick").removeAttr("disabled");          // 隱藏loading圖片     }，     error: function (data) {          alert("error: " + data.d);     }});

   

jquery.ajax請求aspx和ashx的異同 Jquery Ajax調用aspx頁面方法