Heim  >  Artikel  >  Backend-Entwicklung  >  Zusammenfassung der Hintergrundmethoden, die von JQuery und Ajax in Asp.net aufgerufen werden

Zusammenfassung der Hintergrundmethoden, die von JQuery und Ajax in Asp.net aufgerufen werden

高洛峰
高洛峰Original
2016-12-16 16:17:351270Durchsuche

Ich habe während des gesamten Prozesses viele Wissenspunkte gelernt und etwas über die Verwendung von jQuery und Ajax in asp.NET gelernt. Zusammenfassend lässt sich sagen, dass die Prinzipien dieselben sind. Wenn Sie eines verstehen, können Sie darauf achten zu den anderen mit wenigen Unterschieden. , Flexible Verwendung:

1. Methodenaufruf mit Parametern

Der Beispielcode lautet wie folgt:
Front-End-jQuery-Code:
$ (function() { 

Eine Methode, die ich kenne, ist Ajax, um den Hintergrund anzupassen.

1. Methodenaufruf mit Parametern

Der Beispielcode ist wie folgt folgt:

Front-End-jQuery-Code:

<span style="font-size:18px">$(function() {  
  var browers = browersEstimate();  
  var params = &#39;{browersType:"&#39; + browers + &#39;"}&#39;;  
  $.ajax({  
      type: "POST",                   //提交方式  
      url: "Default.aspx/RecordData",   //提交的页面/方法名  
      data: params,                   //参数(如果没有参数:null)  
      dataType: "json",                   //类型  
      contentType: "application/json; charset=utf-8",       
      success: function(data) {       
              //返回的数据用data.d获取内容       
                alert(data.d);       
          },       
          error: function(err) {       
              alert(err);       
         });     
     });</span>

Dies ist die Ajax-Methode unter jquery, die die Hintergrundmethode aufruft.

Dazu sind mehrere Punkte zu beachten Methode:

Die Typmethode muss post sein und die Hintergrundmethode muss statisch sein. Die Methodendeklaration sollte mit dem Attribut [System.Web.Services.WebMethod()] und der Nummer hinzugefügt werden Die Anzahl der übergebenen Parameter sollte mit den Parametern der Methode übereinstimmen:

2. Beispielcode:
<span style="font-size:18px">  [System.Web.Services.WebMethod()]  
    public static void RecordData(string browersType)  
    {  
        if (BrowserControl.Counters == null)  
        {  
            BrowserControl.InitData(0);  
        }  
  
        if (browersType == "")  
        {  
            browersType = "Other";  
        }  
  
        BrowserControl.AddOneByBrowserType(browersType);  
        if (BrowserControl.WriteInDataBase())  
        {  
            BrowserControl.OldTotalCount = BrowserControl.Counters.Count;  
        }  
        else  
        {  
            BrowserControl.OldTotalCount = 0;  
        }  
    }</span>

Front-End-jQuery-Code

asp.net-Hintergrundmethode

<span style="font-size:18px">$(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;       
    });       
});</span>
3. Beispiel für die Rückgabe-Array-Methode

Ende JQuery-Code:
<span style="font-size:18px">[System.Web.Services.WebMethod()]  
public static string SayHello()       
{       
return "Hello Ajax!";       
}</span>

asp.net-Back-End-Code: asp.net-Back-End-Code:

<span style="font-size:18px">$(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("" + this + "");       
                });       
                alert(data.d);       
            },       
            error: function(err) {       
                alert(err);       
            }       
        });       
        //禁用按钮的提交       
        return false;       
    });       
});</span>
4. Operation xml

<span style="font-size:18px">[System.Web.Services.WebMethod()]     
public static List GetArray()       
{       
  List li = new List();       
for (int i = 0; i < 10; i++)       
        li.Add(i + "");       
return li;       
} </span>
Jquery-Frontend-Code:

<span style="font-size:18px">xnl文件示例:     
 <?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代码:Jquery代码:</span>
Zusammenfassung

Die Hauptsache ist, dass wir darauf achten sollten, dass der Methodenname im JS-Code mit dem Backend und dem Hintergrund übereinstimmt Die Methodendeklaration muss mit dem Attribut [System.Web.Services.WebMethod()] hinzugefügt werden. Die Anzahl der übergebenen Parameter sollte mit den Parametern unserer Methode übereinstimmen Debuggen. Es ist viel einfacher, der Rest besteht darin, mehr zu üben und das Verständnis der Prinzipien zu stärken
<span style="font-size:18px">$(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("id:" + $(this).find("id").text() +"");      
  
                    $("#list").append("Name:"+ $(this).find("name").text() + "");       
                })       
            },       
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数       
                alert(status);       
            }       
        });       
        //禁用按钮的提交       
        return false;       
    });       
});</span>

Bitte beachten Sie weitere verwandte Artikel, die die Hintergrundmethoden für JQuery- und Ajax-Aufrufe in Asp zusammenfassen .net. PHP Chinesische Website

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn