【原創】Js調用后台方法

本文轉載自查看原文 2012-07-26 16:13 1851 調用后台代碼/ PageMethods/ AjaxPro/ Jquery/ jquery

對於開發前端的人員來說，為了一些特效，不讓頁面回發，可以需要異步去調用我們后台的方法，由於這個問題比較老了，牛人可以到別處看看了，哈哈。

目前的技術也是比較多，實現方式也各個相同，只要按照每個技術規則就很好的實現了。廢話不說，本節內容如下：

（1）利用一般處理文件來實現調用后台方法

（2）利用Jquery調用后台方法

（3）利用微軟自帶的PageMethods

（4）利用AjaxPro實現調用后台方法

開始了。。。。，本節只講怎么實現，至於理念和深入的資料不會在本節中細講

一：利用一般處理文件來實現調用后台方法

這個其實要利用Jquery來實現，建立一個項目，在此項目上建立一個ashxToBack.aspx窗口用於做測試，前台代碼如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>無標題頁</title>
 4     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 5     
 6     <script type="text/javascript">
 7         $(document).ready(function() {
 8             $("#btn_Sumbit").click(function() {
 9 
10                 $.ajax({
11                     type: "POST",
12                     url: "ashxToBack.ashx",
13                     dataType: "html",
14                     data: "name=" + "ZhangSan",
15                     beforeSend: function(XMLHttpRequest) {
16                         //$("#showResult").text("正在查詢");           
17                     },
18                     success: function(msg) {
19                         alert("您好，" + msg);
20                     },
21                     complete: function(XMLHttpRequest, textStatus) {
22 
23                     },
24                     error: function() {
25                         //錯誤處理
26                     }
27                 });
28             });
29         });
30 
31     </script>
32 </head>
33 <body>
34     <form id="form1" runat="server">
35     <div>
36            <input id="btn_Sumbit" type="button" onclick="form_Submit()" value="測 試"/>
37     </div>
38     </form>
39 </body>
40 </html>

再建立一個一般處理文件ashxToBack.ashx，代碼如下：

 1  public void ProcessRequest(HttpContext context)
 2         {
 3             context.Response.ContentType = "text/plain";
 4 
 5             if (!string.IsNullOrEmpty(context.Request.Form["name"]))
 6             {
 7                 context.Response.Write(context.Request.Form["name"]);
 8                 context.Response.End();
 9             }
10         }

測試一下，是不是很簡單，其實這個可以傳自定類，並且以JSON方式傳遞，方便快捷，並且微軟在3.5框架后對JSON已經有專門的類進行處理了，有興趣的人可以去搜索相關資料，很多的，不多說，繼續。

二：利用Jquery調用后台方法

建立一個頁面JqueryToBack_Simply.aspx，代碼如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>利用Jquery調用后台方法</title>
 4      <script src="jquery-1.4.2.min-vsdoc.js" type="text/javascript"></script>
 5      <script type="text/javascript">
 6          //返回復合類型 
 7          $(document).ready(function() {
 8              $('#btn_Submit').click(function() {
 9                  $.ajax({
10                      type: "POST",
11                      contentType: "application/json",
12                      url: "JqueryToBack_Simply.aspx/GetClass",
13                      data: "{}",
14                      dataType: 'json',
15                      success: function(result) {
16                          $(result.d).each(function() {
17                               alert("用戶ID：" + this['UserID'] + " ,用戶名：" + this['UserName']);
18                              
19                          });
20 
21 
22                      }
23                  });
24              });
25          });
26      </script>
27 </head>
28 <body>
29     <form id="form1" runat="server">
30     <div>
31         <input type="button" id="btn_Submit" value=" 返回復合類型"/>  
32     </div>
33     </form>
34 </body>
35 </html>

后台代碼如下：

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3 
 4         }
 5 
 6         /// <summary>
 7         /// 返回一個復合類型
 8         /// </summary>
 9         /// <returns></returns>
10         [WebMethod]
11         public static UserInfo GetClass()
12         {
13             return new UserInfo { UserID = "100000", UserName = "楊新華" };
14         }
15         public class UserInfo
16         {
17             public string UserID { get; set; }
18             public string UserName { get; set; }
19         }

三：利用微軟自帶的PageMethods

這個得依賴於ScriptManager組件，代碼如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>PageMethods調用后台代碼</title>
 4 
 5     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 6     
 7     <script type="text/javascript">
 8         function form_Submit() {
 9            
10             PageMethods.doSubmit("測試", function(jsonObj) {
11                 alert(jsonObj);
12             });
13            
14         }
15     </script>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
20         </asp:ScriptManager>
21 
22     
23     <div>
24         <input type="button" id="btn_Submit" value="提 交" onclick="form_Submit()" />
25     </div>
26     </form>
27 </body>
28 </html>

后台代碼如下：

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3 
 4         }
 5 
 6             /// <summary>
 7     /// 登入
 8     /// </summary>
 9     /// <param name="account"></param>
10     /// <param name="password"></param>
11     /// <param name="isRememberMe"></param>
12     /// <returns></returns>
13         [WebMethod]
14         public static string doSubmit(string msg)
15         {
16             return msg;
17         }

注意幾項：

第一：ScriptManager 必須設置成 EnablePageMethods="true"

第二：后台方法必須是靜態的。

第三：后台方法上面必須添加特性標記 [System.Web.Services.WebMethod]

四：利用AjaxPro實現調用后台方法

這個需要下載AjaxPro.dll或是AjaxPro.2.dll，我這里用的是AjaxPro.2.dll

首先在你項目中引用這個AjaxPro.2.dll，接下來在Web.Config中配置它

這樣就可以使用了，

新建頁面AjaxPro_Test.aspx，前台代碼如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>AjaxPro來實現調用后台</title>
 4 
 5     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         function form_Submit() {
 8             JqueryBackMethod.AjaxPro_Test.GetMessage("AjaxPro", function(obj) {
 9               alert(obj.value);
10             });
11         }       
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="btn_Sumbit" type="button" onclick="form_Submit()" value="測 試"/>
18     </div>
19     </form>
20 </body>
21 </html>

后台代碼如下：

 protected void Page_Load(object sender, EventArgs e)
        {
            Utility.RegisterTypeForAjax(typeof(JqueryBackMethod.AjaxPro_Test));
        }

        [AjaxMethod]
        public string GetMessage(string testText)
        {
            return "Hello " + testText;
        }

注意事項：

第一：Utility.RegisterTypeForAjax(typeof(JqueryBackMethod.AjaxPro_Test)); 是相當於注冊哪個類可以被前台js調用，如果這個類有命名空間，則在注冊時必須加上命名空間

前台調用也是如此

第二：在后台方法上必須添加特性： [AjaxMethod]

第三：當你在項目中使用第二種方法時，再用本方法就不行了，原因是這個方法在Web.config中注冊時已經加了一些額外的處理器，導致不能運行。這個額外處理器可以在運行這個頁面時查看源代碼即可。源代碼如下：

1 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
2 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
3 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
4 <script type="text/javascript" src="/ajaxpro/JqueryBackMethod.AjaxPro_Test,JqueryBackMethod.ashx"></script>

好了，本節就說到這，只是給大家開個山，更多技術知識請在網絡上查詢相關資料了解。

歡迎轉載，轉載請標注原創地址：http://www.cnblogs.com/yxhblog/archive/2012/07/26/2610264.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ajax 前台js調用后台方法 js調用后台，后台調用前台等方法總結 js 調用后台代碼 asp.net js調用后台方法 js調用后台接口進行下載 js調用后台代碼的幾種方式 <轉> js調用后台變量使用Jquery的Ajax調用后台方法 JS常用方法總結，及jquery異步調用后台方法實例 js函數調用后台帶參函數的解決方法