06
2012
08

Js调用后台方法

【原创】Js调用后台方法
2012-07-26 16:13 by 杨新华, 310 阅读, 4 评论, 收藏, 编辑
 
对于开发前端的人员来说,为了一些特效,不让页面回发,可以需要异步去调用我们后台的方法,由于这个问题比较老了,牛人可以到别处看看了,哈哈。

目前的技术也是比较多,实现方式也各个相同,只要按照每个技术规则就很好的实现了。废话不说,本节内容如下:

(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中配置它

  <httpHandlers>

      <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2 "/>
    </httpHandlers>

这样就可以使用了,

新建页面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

« 上一篇下一篇 »

评论列表:

1.三利达  2012/8/6 14:07:02 回复该留言
顶 谢谢博主分享

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。