Summary of background methods called by JQuery and ajax in Asp.net

I learned a lot of knowledge points during the whole process, and understood the use of jQuery and Ajax in asp.NET. To summarize, in fact, the principles are the same. If you understand one, you can pay attention to the other ones with few differences. It is flexible. Usage:

1. Method call with parameters

The sample code is as follows:
Front-end jQuery code:
$(function() { 

One method I know is the ajax method to adjust the background.

1. There Parameter method call

The sample code is as follows:

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>

This is the Ajax method under jquery to call the background method.

There are several points to note about this method:

The type method must be post, and then there are The background method must be static, the method declaration must be added with the attribute [System.Web.Services.WebMethod()], and the number of parameters passed should be the same as the parameters of the method.

asp.Net background method:

<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>

. 2. Method call without parameters

Example code:

Front-end jQuery code

<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>

asp.net background method

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

3. Calling method that returns an array

Example front-end JQuery 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>

asp.net back-end code ：asp.net Backend code:

<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>

4. Operation xml

<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>

Jquery frontend code:

<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>

Summary

The main thing is that we have to pay attention to the method name in the js code to be consistent with the backend, and then the backend method must be It is static. The method declaration must add the attribute [System.Web.Services.WebMethod()], and the number of parameters passed should also be the same as the parameters of the method. Pay attention to these parts, and our debugging will be much simpler. The rest Just practice more and strengthen your understanding of the principles.

For more articles on the summary of JQuery and ajax calling background methods in Asp.net, please pay attention to the PHP Chinese website