jQuery+AJAX calls the background of the page

This time I will bring you the background of jQuery+AJAX calling page, what are the precautions of the background of jQuery+AJAX calling page, the following is a practical case, let’s take a look .

The example in this article shares the jQuery AJAX calling page background method for your reference. The specific content is as follows

1. Create a new demo.aspx page.

2. First add reference to the background file demos.aspx.cs of the page.

using System.Web.Services;

1).Method call without parameters.
Please note that this version cannot be lower than .net framework 2.0 . It is not supported in version 2.0.
Backend code:

[WebMethod]   
public static string SayHello()   
{   
   return "Hello Ajax!";   
}

JS code:

$(function() {   
  $("#btnOK").click(function() {   
    $.ajax({   
      //要用post方式   
      type: "Post",   
      //方法所在页面和方法名   
      url: "Demo.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;   
  });   
});

Page code:

  <form id="form1" runat="server">
  <p>
    <asp:Button ID="btnOK" runat="server" Text="验证用户" />
  </p>
  </form>

The running effect is as follows:

2). Method call with parameters
Backend code:

[WebMethod]   
public static string GetStr(string str, string str2)   
{   
  return str + str2;   
}

JS code:

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

The operation effect is as follows:

3).Return arrayMethod
Backend code:

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

JS code:

$(function() {   
  $("#btnOK").click(function() {   
    $.ajax({   
      type: "Post",   
      url: "demo.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;   
  });   
});

Page code:

<form id="form1" runat="server">
<p>
  <asp:Button ID="btnOK" runat="server" Text="验证用户" />
</p>
<ul id="list">
</ul>
</form>

Running result graph:

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Province, city and county three-level linkage when ajax does not refresh

After AJAX realizes the display page Just loading

The above is the detailed content of jQuery+AJAX calls the background of the page. For more information, please follow other related articles on the PHP Chinese website!