在asp.net中使JQuery的Ajax用总结

时间 2020-09-20

标签 asp.net asp jquery ajax 总结栏目 ASP 繁體版

原文原文链接

自从有了JQuery，Ajax的使用变的愈来愈方便了，可是使用中仍是会或多或少的出现一些让人短期内痛苦的问题。本文暂时总结一些在使用JQuery Ajax中应该注意的问题，若有不恰当或者不完善的地方，欢迎你们指正和补充。html

本文将从Ajax请求aspx、ashx和asmx三种方式讨论。jquery

首先看看请求aspx的状况 web

Aspx页面的Ajax请求能够有两种方式：ajax

一、经过使用get或者post方法，传递页面地址为url参数的值，并附带一些标记参数，直接请求。这种方式的Ajax被一些人誉为“假的Ajax”，表面上没有刷新页面，其实后台的执行状况和刷新页面的效果是同样的。chrome

其实这种状况也能够请求页面中的特定的方法，只要使用附带的参数去判断，就能够“请求”特定的方法了。json

下面展现了使用两种不一样的方法请求两个不一样页面的状况，只是摘抄了代码，具体的详细代码能够在文章结尾下载。 session

前台： app

// 直接请求页面的方式
        $( function () {
             /*
            $.get(
                "RequestPage.aspx",
                { "token": "ajax" },
                function (data) {
                $("#dataShow").text(data);
                }
            ); */
            $.ajax({
                type:"Post",
                url: "ResponsePage.aspx",
                 // data: "{'token':'ajax'}",// 使用这种方式居然没法传递参数，各位有知道缘由的告诉一下啊。
                data:"token=ajax",
                success: function (data) {
                    $("#dataShow").text(data);
                }
            });
        })

后台： post

protected void Page_Load( object sender, EventArgs e)
{
   if (! this.IsPostBack)
   {
      if ((Request[ " token "]?? "")== " ajax ")
      {
          // 下面这些内从能够放在一个方法里，而后经过“token”标记去判断执行哪一个方法。
                    Response.Write( " 我是直接请求aspx页面返回的文字！ ");
                    Response.End();
        }
     }
}

以上请求返回值都是字符串也就是dataType为text或者html类型。ui

若是要是但愿请求返回的数据是xml或者json格式的，该怎么办呢？

若是要是xml格式的，需要添加一句Response.ContentType=”application/xml”；还有一点要注意的是Write中的内容必须是能够解析为xml的字符串才能够，好比“<my>123</my>”是能够的，“123”是不能够的，由于返回的信息中responseXml等于null。以下图：

前台：

$.ajax({

                type: "Post",
                url: "ResponsePage.aspx",
                 // data: "{'token':'ajax'}",// 使用这种方式居然没法传递参数，各位有知道缘由的告诉一下啊。
                data: "token=ajax",
               // 不须要指定contentType，由于指定后返回的是整个页面的html，不知道为啥，请求解答啊。
                dataType: "xml",
                success: function (data) {
                    alert(data);
                },
                error: function (d, c,e) {
                    alert(e);
                }
            });

后台：

// 若是要是返回的响应为xml，则必须这样设置

Response.ContentType = " application/xml ";
// 若是要是返回的响应为xml,返回的字符串必须是能够被解析的xml文档格式。
Response.Write( " <my>123</my> ");
Response.End();

若是是为json格式的，后台代码中Response.ContentType=”application/json”这句无关紧要，不影响返回的值。可是Response.Write中的值必定要是json格式的，不然会有Invalid Json格式的错误。

前台：

$.ajax({
                type: "Post",
                url: "ResponsePage.aspx",
                 // data: "{'token':'ajax'}",// data必须是一个{key：value}的形式，这是一个字符串，是不行的。

// data:{token:"ajax"},// 这种方式也可行。
                data: "token=ajax",
               // 不须要指定contentType，由于jquery会自动添加contentType=“application/x-www-form-urlencode”。
                dataType: "json",
                success: function (data) {
                    alert(data);
                },
                error: function (d, c,e) {
                    alert(e);
                }

});

记录：若是直接请求一个页面，若是data使用"{'token':'ajax'}"这种字符串的形式，jquery是没法转换为token=ajax的形式的。

jquery 文档中说，可使用{key：value}形式的data请求页面，此时jquery会自动添加contentType=“application/x-www-form-urlencode”，使传入的data自动转换为key=value的形式。

后台：

// 若是要是返回的响应为xml，则必须这样设置
Response.ContentType = " application/json ";
// 若是要是返回的响应为xml,返回的字符串必须是能够被解析的xml文档格式。
Response.Write(“[ 123] " );

Response.End();

二、请求aspx页面后台中的方法。

其实上面的直接请求页面的方法中也跟介绍了一种请求页面内方法的解决方案，那就是在前台的ajax中传递一个参数做为标记，好比上面的那个“token”，而后在后台的page_load里面判断token的值，根据值的不一样执行不一样的方法。下面要介绍的是直接执行页面后台中的方法。

（1）使用简便get或者post方法时，因为不能设置contentType和dataType因此即便请求的是页面中的方法，最后请求的仍是当前页面，返回的值仍旧是当前页面的html内容。因此在请求方法的时候，简便方法仍是不合适的。

(2) 使用非简便方法时，不论是post仍是get，若是dataType为xml、text、htm，最后返回的值仍旧是整个html页面的内容。因此若是要想到的值，仍是设置dataType为“json”吧，不要忘记还要设置contentType为“application/json;charset=utf-8”，不设置这个，json也是返不回来的。并且还必须保证后台的被请求的方法是static的，还有[webmethod]标记，并且还必须是public的。

前台：

$.ajax({

                type: "post",
                url: "RequestPage.aspx/RequestedMethod",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (res) {
                    alert("success:"+res.d); // 注意这点后面要加个d才能获取字符串信息，至于为何要加个d，你经过chrome看看返回的响应就知道了，O(∩_∩)O
},
                error: function (xmlReq, err, c) {
                    alert("error:" + err);                }
            });

后台：

// 须要被Ajax请求的后台方法
[WebMethod]
[ScriptMethod(UseHttpGet= true)] // 若是要使用POST请求，去掉这个标记
public static string RequestedMethod()
{
return " [123] ";

}

直接使用post是没有问题的：

若是type改成“get”，则会出现“500内部错误”。错误信息为：{"Message":"尝试使用 GET 请求调用方法“RequestedMethod”，但不容许这样作。

解决方法就是在后方法上再加一个标[ScriptMethod(UseHttpGet=true)]，ScriptMethod 在System.Web.Script.Services下.这样以后，就能够在前台经过Get方式请求了，可是若是加了这个标记以后，前台就不能用POST进行请求了。

三、请求aspx页面后台中的方法，带参数

前台：

 $.ajax({
                type: "Post",
                url: "ResponsePage.aspx/RequestMethod1",
                data:"{'msg':'hello'}",
                contentType: "application/json;charset=utf-8",// 这句可不要忘了。
                dataType: "json",
                success: function (res) {
                    $("#dataShow").text("success:" + res.d); // 注意有个d，至于为何经过chrome看响应吧，O(∩_∩)O。
                },
                error: function (xmlReq, err, c) {
                    $("#dataShow").text("error:" + err);
                }
            });

后台：

[WebMethod]
public static string RequestMethod1(string msg)
{
      return msg;
 }

整体上带参数的方式和不带参数相似，不一样点就是在使用ajax请求的时候，要传递一个data参数，注意这个data必定是一个json格式的字符串，不然就会报json错误的，具体为何，由于你传递的contentType是application/json啊。

请求asmx（webservice）的状况

请求webservice的时候，主要是请求webservice中的方法，在请求以前不要忘记了代码开头的那段取消注释的提示“// 若要容许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

// [System.Web.Script.Services.ScriptService]”

请求webservice中的方法的处理方式和请求aspx页面后台方法的处理方式相似，但也有一些不一样。

被请求的webservice中方法的特色：

（1）请求的方法必须是为public的。

（2）方法必须有[WebMethod]标记。

（3）若是想使用Get的方式请求，还要有[ScriptMethod(UseHttpGet=true)]标记。使用Get请求Webservice的方法的时候，只添加这个标记是不够的，还要修改Web.Config文件，让WebService支持Get方式请求，不然会出现 “因 URL 意外地以“/GetXmlByGet”结束，请求格式没法识别。“的错误。修改方法为：在System.web配置节下添加如下红色的内容：

< System .web >
……………
< webServices >
       < protocols >
         < add name ="HttpGet" />
         < add name ="HttpPost" />
       </ protocols >
     </ webServices >

</System.web>

（4）请求xml数据类型的时候，要注意，若是方法返回的是string类型的，返回的xml格式是这样的：

若是方法返回的是字符串，则会把返回的字符串包装在<string>标签中返回。

好比如下方法请求后的返回值：

[WebMethod]

public string GetXmlByPost()
{
return " 我是经过Post方式请求返回的xml ";
}

返回值：

<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">我是经过Post方式请求返回的xml</string>

红色部分是被请求方法返回的字符串，其余是自动添加的，因此在前台中经过jquery获取数据的时候，应该$(res).find(”string”).text();

若是方法返回的是xmlDocument对象，则就是方法中构造的xml对象。

好比如下方法请求后的返回值:

// 使用Get方式请求xml，注意返回的字符串必定要是能够解析的xml格式。

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public System.Xml. XmlDocument GetXmlByGet()
{
    string xml = " <?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是经过Get方式请求返回的xml</my> ";
    System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
   doc.LoadXml(xml);
    return doc;

}

返回的响应为：

<?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是经过Get方式请求返回的xml</my>

此时就能够经过$(res).find(”my”).text()的方式取数据了。此时操做的彻底是你本身构造的xml。

（5）关于请求返回JSON须要注意的就是，返回的也是“[d:{}]”格式的数据，所在前台获取的时候，必定要加个”.d”，其余的和xml差很少了。

（6） Text的类型的就很少说了。

请求ashx的状况

请求ashx的时候和直接请求apsx页的状况相似，毕竟都是经过response.Write(string)的方式返回数据的。

须要注意的地方是：context.Response.ContentType的值，根据dataType的值区分：

Text：“text/plain“;

XML：“application/xml“;

JSON：“application/json“.

dataType为xml的时候，response.Write(string)中的字符串必定要符合xml的格式，为json的时候，response.Write(string)中的字符串必定要符合json的格式为不然会出现解析错误，这个和aspx页是同样的。

若是要使用session的话，在handler的代码中添加System.Web.SessionState的引用，并让这个handler继承IRequiresSessionState接口，必定要继承这个接口，不然会出错的。

其实都是很基本的东西，总结一下，有不妥的地方欢迎你们指正。

排版比较差，你们将就着看吧。

/Files/acles/JQueryAjaxDemo.rar

下面这个版本添加了请求页面中方法的代码，为了保存之前的代码，这里从新上传最新。

/Files/acles/JQueryAjaxDemo20130709.rar

出处：http://www.cnblogs.com/acles/articles/2385648.html