使用jQuery.ajaxWebService请求后台WebMethod方法

最近在写一个小型的博客系统.想着用ajax来实现大部分功能.所以前台的文章列表界面是通过自定义的一个用户控件.然后多次调用这个用户控件来实现文章分类加载的.刚开始的时候想着通过ajax来请求一个ashx.然后将用户控件返回.这样的话会有很多的问题.实现起来还是挺麻烦的.在网上找了找相关的资料.发现可以使用jQuery.ajaxWebService来直接请求后台WebMethod方法.下面分享给大家
首先,在aspx页面的cs文件中添加一个公开的方法,然后在其前面加上[WebMethod]属性

[WebMethod]
public static string RenderUserControl(string postid,string action)
{
    if (action == "getlist")
    {
                Page page = new Page();
                UserControl.PostList postlist = (UserControl.PostList)page.LoadControl("/UserControl/PostList.ascx");
                postlist.setid(Convert.ToInt32(postid));
                page.Controls.Add(postlist);
                StringWriter writer = new StringWriter();
                HttpContext.Current.Server.Execute(page, writer, false);
                System.Threading.Thread.Sleep(2000);
                return writer.ToString();
            }
            else if (action == "getedit")
            {
                Page page = new Page();
                UserControl.EditPost editpost = (UserControl.EditPost)page.LoadControl("/UserControl/EditPost.ascx");
                editpost.setid(Convert.ToInt32(postid));
                page.Controls.Add(editpost);
                StringWriter writer = new StringWriter();
                HttpContext.Current.Server.Execute(page, writer, false);
                return writer.ToString();
            }
            else
            {
                return "";
            }
        }
}

这样,我们就可以通过ajax来请求这个方法了.

$.ajax({
        type: "POST",
        contentType: "application/json",
        url: "Index.aspx/RenderUserControl",
        data: "{postid:'1',action:'getlist'}",
        dataType: "json",
        success: function(){.......}
    });

这里对几个参数做一下简单的说明,
type:请求的类型,这里必须用post 。WebMethod方法只接受post类型的请求。
contentType:发送信息至服务器时内容编码类型。我们这里一定要用application/json 。
url:请求的服务器端处理程序的路径,格式为”文件名(含后缀)/方法名”
data:参数列表。注意,这里的参数一定要是json格式的字符串,记住是字符串格式,如:”{aa:11,bb:22,cc:33 , …}”。如果你写的不是字符串,那jquery会把它实序列化成字符串,那么在服务器端接受到的就不是json格式了,且不能为空,即使没有参数也要写成”{}”,如上例。
很多人不成功,原因就在这里。
dataType:服务器返回的数据类型。必须是json,其他的都无效。因为webservice 是一json格式返回数据的,其形式为:{“d”:”…….”}。
success:请求成功后的回调函数。你可以在这里对返回的数据做任意处理。
也可以参考这篇文章,有详细说明 jQuery的Ajax方法学习小记
可以写一个脚本文件叫 jquery.extend.js。在里面写一个叫ajaxWebService的方法(因为webmethod其实就是WebService嘛,故此方法对请求*.asmx也是有效的),然后对上面的ajax进行封装.代码如下:

<summary>
///    jQuery原型扩展,重新封装Ajax请求WebServeice
///    </summary>
///    <param name="url" type="String">
///     处理请求的地址
///</param>
///    <param name="dataMap" type="String">
///     参数,json格式的字符串
///</param>
///    <param name="fnSuccess" type="Function">
///     请求成功后的回调函数
///</param>
$.ajaxWebService = function(url, dataMap, fnSuccess) {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: url,
        data: dataMap,
        dataType: "json",
        success: fnSuccess
    });
}

好了,这样我们请求webmethod方法 就可以这样写了:

$.ajaxWebService("Index.aspx/RenderUserControl", "{postid:'1',action:'getlist'}", function(result) {......});