Erläuterung zur Verwendung von JQuery Ajax in asp.net und Aufrufhintergrundbeispiele

Seit der Einführung von JQuery ist die Verwendung von Ajax immer komfortabler geworden, es gibt jedoch immer noch einige Probleme, die bei der Verwendung in kurzer Zeit zu Schmerzen führen können. Dieser Artikel fasst vorübergehend einige Probleme zusammen, die bei der Verwendung von JQuery Ajax beachtet werden sollten. Wenn es unangemessene oder unvollständige Bereiche gibt, können Sie diese gerne korrigieren und ergänzen.

In diesem Artikel werden die drei Möglichkeiten zum Anfordern von Aspx, Ashx und Asmx von Ajax erläutert.

Ajax-Anfragen für Aspx-Seiten können auf zwei Arten erfolgen:

1 Übergeben Sie mithilfe der Get- oder Post-Methode die Seitenadresse als Wert des URL-Parameters und fügen Sie ein Tag hinzu Parameter, um eine direkte Anfrage zu stellen. Diese Methode von Ajax wird von einigen Leuten als „falsches Ajax“ gefeiert. Oberflächlich betrachtet wird die Seite nicht aktualisiert. Tatsächlich sind die Hintergrundausführung und die Wirkung der Seitenaktualisierung gleich.

Tatsächlich können Sie in diesem Fall auch eine bestimmte Methode auf der Seite anfordern. Solange Sie die beigefügten Parameter zur Beurteilung verwenden, können Sie eine bestimmte Methode „anfordern“.

Im Folgenden wird die Verwendung zweier verschiedener Methoden zum Anfordern zweier verschiedener Seiten gezeigt. Der spezifische detaillierte Code kann am Ende des Artikels heruntergeladen werden.

Front-End:

// 直接请求页面的方式
        $(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); 
                }
            });
        })

Back-End:

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

Die Rückgabewerte der obigen Anforderungen sind alle Zeichenfolgen, dh der Datentyp ist Text oder HTML.

Was soll ich tun, wenn ich möchte, dass die von der Anfrage zurückgegebenen Daten im XML- oder JSON-Format vorliegen?

Wenn es im XML-Format vorliegt, müssen Sie Response.ContentType="application/xml" hinzufügen. Beachten Sie außerdem, dass der Inhalt in Write eine Zeichenfolge sein muss, die in XML analysiert werden kann, z " "123" ist akzeptabel, aber "123" ist nicht akzeptabel, da ResponseXml in den zurückgegebenen Informationen gleich Null ist. Wie unten gezeigt:

Frontend:

$.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);  
                }
         });

Backend:

// Wenn die zurückgegebene Antwort XML ist, muss dies der Fall sein der Fall Set

Response.ContentType = "application/xml";
// Wenn die zurückgegebene Antwort XML ist, muss die zurückgegebene Zeichenfolge in einem XML-Dokumentformat vorliegen, das analysiert werden kann.
Response.Write("123");
Response.End();

Wenn es im JSON-Format vorliegt, Response ContentType=" „application/json“ ist optional und hat keinen Einfluss auf den zurückgegebenen Wert. Der Wert in Response.Write muss jedoch im JSON-Format vorliegen, andernfalls wird der Fehler „Ungültiges JSON-Format“ angezeigt.

Rezeption:

$.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);  
       }
 });

Eintrag: Wenn Sie eine Seite direkt anfordern und die Daten die Zeichenfolgenform „{'token':'ajax'} verwenden“, jquery Es kann nicht in die Form token=ajax konvertiert werden.

Das JQuery-Dokument besagt, dass Sie Daten in der Form {key: value} verwenden können, um die Seite anzufordern. Zu diesem Zeitpunkt fügt JQuery automatisch contentType="application/x-www-form-urlencode" hinzu. um die eingehenden Daten automatisch in die Schlüssel=Wert-Form umzuwandeln.

Backend:

// Wenn die zurückgegebene Antwort XML ist, müssen Sie sie wie folgt festlegen
Response.ContentType = "application/json";
// Wenn ja zurückgegeben Die Antwort ist XML und die zurückgegebene Zeichenfolge muss in einem XML-Dokumentformat vorliegen, das analysiert werden kann.
Response.Write("[123]");

Response.End();

2. Fordern Sie die Methode im ASPX-Seitenhintergrund an.

Tatsächlich stellt die obige Methode zum direkten Anfordern der Seite auch eine Lösung für die Methode zum Anfordern der Seite dar, die darin besteht, einen Parameter als Tag im Ajax an der Rezeption zu übergeben, z. B. „ token“ oben. Dann wird der Wert des Tokens im page_load im Hintergrund beurteilt und verschiedene Methoden werden entsprechend den unterschiedlichen Werten ausgeführt. Was wir im Folgenden vorstellen werden, ist die Methode zur direkten Ausführung des Seitenhintergrunds.

(1) Bei Verwendung der einfachen Get- oder Post-Methode ist die letzte Anforderung immer noch die aktuelle Seite und der zurückgegebene Wert, da contentType und dataType nicht festgelegt werden können, selbst wenn die Methode auf der Seite angefordert wird immer noch der HTML-Inhalt der aktuellen Seite. Wenn Sie also eine Methode anfordern, ist die einfache Methode immer noch ungeeignet.

(2) Bei Verwendung unpraktischer Methoden, sei es Post oder Get, ist der endgültig zurückgegebene Wert immer noch der Inhalt der gesamten HTML-Seite, wenn der Datentyp XML, Text oder HTM ist. Wenn Sie also über den Wert nachdenken möchten, sollten Sie den dataType auf „json“ setzen. Vergessen Sie nicht, den contentType auf „application/json;charset=utf-8“ zu setzen wird nicht zurückgegeben. Es muss außerdem sichergestellt werden, dass die angeforderte Methode im Hintergrund statisch ist, mit [webmethod] gekennzeichnet ist und öffentlich sein muss.

Frontend:

$.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); }
});

Backend:

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

Es ist kein Problem, Beiträge direkt zu verwenden:

Wenn der Typ in „get“ geändert wird, wird „500 Internal Error“ angezeigt. Die Fehlermeldung lautet: {"Message": Es wurde versucht, die Methode "RequestedMethod" mithilfe einer GET-Anfrage aufzurufen, dies ist jedoch nicht zulässig.

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

 3、 请求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格式是这样的：

如果方法返回的是字符串，则会把返回的字符串包装在标签中返回。

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

    [WebMethod]

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

 返回值：

我是通过Post方式请求返回的xml

红色部分是被请求方法返回的字符串，其他是自动添加的，所以在前台中通过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;
}

返回的响应为：

我是通过Get方式请求返回的xml

此时就可以通过$(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接口，一定要继承这个接口，否则会出错的。

下面来说明利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

1、无参数的方法调用

asp.net 代码：

using System.Web.Script.Services;   
[WebMethod]   
public static string SayHello()   
{        
      return "Hello Ajax!";   
}  
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{     
    return "Hello Ajax!";
}

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

JQuery 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            //要用post方式   
            type: "Post",   
            //方法所在页面和方法名   
            url: "data.aspx/SayHello",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                //返回的数据用data.d获取内容   
                alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            //要用post方式
            type: "Post",
            //方法所在页面和方法名
            url: "data.aspx/SayHello",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //返回的数据用data.d获取内容
                alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

2、带参数的方法调用

asp.net 代码：

using System.Web.Script.Services;   
[WebMethod]   
public static string GetStr(string str, string str2)   
{   
    return str + str2;   
}  
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
    return str + str2;
}

JQuery 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetStr",   
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字   
            data: "{&#39;str&#39;:&#39;我是&#39;,&#39;str2&#39;:&#39;XXX&#39;}",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                //返回的数据用data.d获取内容   
                  alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetStr",
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
            data: "{&#39;str&#39;:&#39;我是&#39;,&#39;str2&#39;:&#39;XXX&#39;}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //返回的数据用data.d获取内容
                  alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

3、返回数组方法的调用

asp.net 代码：

using System.Web.Script.Services;   
[WebMethod]   
public static List<string> GetArray()   
{   
    List<string> li = new List<string>();   
    for (int i = 0; i < 10; i++)   
        li.Add(i + "");   
    return li;   
}  
using System.Web.Script.Services;
[WebMethod]
public static List<string> GetArray()
{
    List<string> li = new List<string>();
    for (int i = 0; i < 10; i++)
        li.Add(i + "");
    return li;
}

JQuery 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetArray",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                //插入前先清空ul   
                $("#list").html("");   
                //递归获取数据   
                $(data.d).each(function() {   
                    //插入结果到li里面   
                    $("#list").append("<li>" + this + "</li>");   
                });   
                alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetArray",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //插入前先清空ul
                $("#list").html("");
                //递归获取数据
                $(data.d).each(function() {
                    //插入结果到li里面
                    $("#list").append("<li>" + this + "</li>");
                });
                alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

4、返回Hashtable方法的调用
asp.net 代码：

using System.Web.Script.Services;   
using System.Collections;   
[WebMethod]   
public static Hashtable GetHash(string key,string value)   
{   
    Hashtable hs = new Hashtable();   
    hs.Add("www", "yahooooooo");   
    hs.Add(key, value);   
    return hs;   
}  
using System.Web.Script.Services;
using System.Collections;
[WebMethod]
public static Hashtable GetHash(string key,string value)
{
    Hashtable hs = new Hashtable();
    hs.Add("www", "yahooooooo");
    hs.Add(key, value);
    return hs;
}

JQuery 代码：

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetHash",   
            //记得加双引号  T_T   
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);   
            },   
            error: function(err) {   
                alert(err + "err");   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetHash",
            //记得加双引号  T_T
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);
            },
            error: function(err) {
                alert(err + "err");
            }
        });
        //禁用按钮的提交
        return false;
    });
});

5、操作xml
XMLtest.xml:

<?xml version="1.0" encoding="utf-8" ?>  
<data>  
  <item>  
    <id>1</id>  
    <name>qwe</name>  
  </item>  
  <item>  
    <id>2</id>  
    <name>asd</name>  
  </item>  
</data>  
<?xml version="1.0" encoding="utf-8" ?>
<data>
  <item>
    <id>1</id>
    <name>qwe</name>
  </item>
  <item>
    <id>2</id>
    <name>asd</name>
  </item>
</data>

JQuery 代码：

$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            url: "XMLtest.xml",   
            dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了   
            success: function(xml) {   
                //清空list   
                $("#list").html("");   
                //查找xml元素   KVM 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机
                $(xml).find("data>item").each(function() {   
                    $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");   
                    $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");   
                })   
            },   
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数   
                alert(status);   
            }   
        });   
        //禁用按钮的提交   
        return false;   
    });   
});  
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            url: "XMLtest.xml",
            dataType: &#39;xml&#39;, //返回的类型为XML ，和前面的Json，不一样了
            success: function(xml) {
                //清空list
                $("#list").html("");
                //查找xml元素
                $(xml).find("data>item").each(function() {
                    $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");
                    $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");
                })
            },
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                alert(status);
            }
        });
        //禁用按钮的提交
        return false;
    });
});