jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

简介:

  我们都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在类的类名));会将标记有[Ajax.AjaxMethod]方法注册在客户端。在某项目中,设计模板字段引擎,采用html+jquery实现,这里的数据就难免需要ajax获取,但是团队对于js掌握不一,所以我写了下面辅助类,可以像ajaxpro一样简化ajax的开发。

代码-jQueryInvokeMethodAttribute (此处只做标示方法处理,所以为空):

[AttributeUsage(AttributeTargets.Method, AllowMultiple= false,Inherited= false)] 
     public  class jQueryInvokeMethodAttribute : Attribute 
    { 
    }

代码-jQueryAjaxUtility(分注册脚本和调用ajax事件):

View Code

为了考虑反射的性能,加入了类级注册脚本方法缓存处理jQueryUtilityCache,具体见demo。

测试:

html:

< form  id ="form1"  runat ="server" > 
     < div > 
         < input  id ="Button1"  type ="button"  value ="button"   /> 
     </ div > 
     </ form >

后台方法注册Page_Load

Green.Utility.jQueryAjaxUtility.RegisterClientAjaxScript( typeof(_Default));

1:

前台:

复制代码
_Default.Test("ajax", 
                             { 
                                 success:  function(e) { 
                                     alert(e); 
                                 }, 
                                 dataType: "text" 
                             });
复制代码

后台:

[Green.Utility.jQueryInvokeMethod()] 
    public  static  string Test( string str) 
   { 
        return  " hello: " + str; 
   } 

效果:

image

2:

前台ajax:

复制代码
_Default.TestArrayJson(1, 2, 3, 
              { 
                  success:  function(e) {                                  
                      $.each(e,  function(i, n) { alert(n); }); 
                  }, 
                  dataType: "json" 
              }) 
复制代码

后台:

复制代码
[Green.Utility.jQueryInvokeMethod()] 
public  static  int[] TestArrayJson( int p1,  int p2,  int p3) 

     return  new  int[] { p1, p2, p3 }; 
}
 
复制代码

效果:

image 

3:

前台ajax:

复制代码
_Default.TestArrayxml("key", "value", 
            { 
                success:  function(e) { 
                    alert(e.key); 
                    alert(e.Value); 
                }, 
                dataType: "json" 
            })
复制代码

后台:

[Green.Utility.jQueryInvokeMethod()] 
     public  static Test TestArrayxml( string key, string value) 
    { 
         return  new Test() { key=key,Value=value}; 
    }

效果:

image

最后看看FireBug中ajax http头信息:

image

 

其他资料jQuery目录:  我jQuery系列之目录汇总

附录:代码下载



本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/archive/2011/09/26/2192253.html,如需转载请自行联系原作者
目录
相关文章
|
5月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
54 0
|
前端开发 JavaScript 程序员
【jquery Ajax 】art-template模板引擎的概念与使用
【jquery Ajax 】art-template模板引擎的概念与使用
125 0
【jquery Ajax 】art-template模板引擎的概念与使用
|
前端开发 JavaScript 测试技术
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
164 0
【jquery Ajax】接口的学习与Postcode插件的使用
|
前端开发 JavaScript
【jquery Ajax 】art-template模板引擎案例——新闻列表
【jquery Ajax 】art-template模板引擎案例——新闻列表
108 1
【jquery Ajax 】art-template模板引擎案例——新闻列表
|
JavaScript 前端开发
jQuery |AJAX load() 方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
1126 0
|
JavaScript 前端开发 存储
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.4 技巧:使用AJAX加载外部页面
不同之处在于jQuery Mobile处理链接的方式。当链接地址指向的域和当前页面的域相同,默认是使用AJAX请求加载的。可以通过特定的设置关掉这个功能,稍后本章会有演示。另外,如果链接地址指向了不同的域,则将和普通网站的链接一样对待。
1524 0
|
Web App开发 JavaScript 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.19 技巧:利用JavaScript调用加载页面
为了能看到这种加载动作的结果,需要一种工具才行,比如Firefox中的Firebug或者别的浏览器中类似的开发者工具。点击按钮后,会触发这段代码,然后一张新的页面会出现在DOM树中。
1571 0
|
JavaScript 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.6 技巧:不使用AJAX而链接至外部页面
默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。
1673 0