The jquery.Ajax() method calls Asp.Net background method analysis

The jquery.Ajax() method calls Asp.Net background method analysis_jquery

WBOY

Release： 2016-05-16 17:00:10

Original

1210 people have browsed it

Using JQuery’s $.ajax() can easily call asp.net’s background methods.
Let’s warm up with a simple example first.

1. Method call without parameters
asp.net code:

Copy code The code is as follows:

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!";
}

Note: 1. The method must be static method, and it must have the declaration of [WebMethod]

$(function() {
$("#btnOK").click(function() {

$.ajax({ contentType: "application/ json; charset=utf-8", (data.d ); 🎜> //Disable button submission return false; }); });and method name url: "data.aspx/SayHello",

contentType: "application/json; charset=utf-8",

dataType: "json",
: function(data success ) {
alert(err);
        }
       });


Result:

2. Method call with parameters
asp.net code:

Copy code The code is as follows:

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

Copy code The code is as follows:

///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetStr", using 'str':'I am','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
                                                                                                                                                                                                                                               🎜> alert(err );                                                    $(function() {
$("#btnOK").click(function() {
$.ajax( { Type: "Post",
URL: "Data.aspx/GetStr",
// The method of passing parameters must be right, STR is the name of the parameter, STR2 is the second shape Parameter name
data: "{'str':'I am','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType : "json",
success: function(data) {
//The returned data is obtained using data.d error: function (err) {
                    alert(err);

Run result:

Enter advanced applications below

3. Call to return array method
asp.net code:

Copy code The code is as follows:

using System.Web.Script.Services;

[WebMethod]
public static List GetArray()
{
List< ;string> li = new List();

for (int i = 0; i < 10; i )
li.Add(i "");

return li;
}
using System.Web.Script.Services;

[WebMethod]
public static List GetArray()
{
List li = new List();

for (int i = 0; i < 10; i )
li.Add(i "");

return li;
}

JQuery code:

Copy code The code is as follows :

///
$(function() {
$("#btnOK").click( function() {
$.ajax({
type: "Post",
url: "data.aspx/GetArray",
contentType: "application/json; charset=utf-8" ,
dataType: "json",
success: function(data) {
//Clear ul before inserting
$("#list").html("");

                                                                                                         ("#list").append("< li>" this ""); error: function(err) {
alert(err);                                                                                                   // /
$(function() {
$("#btnOK").click(function() {
$ .ajax({
       type: "Post",
                                                                                                                                                                              ",
success: function(data) {

                                                                                                                                                                 .append("< li>" this "");
              });

              alert(data.d); 🎜> });


Run result:

4. Return the call to the Hashtable method
asp.net code:

Copy code The code is as follows:

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

Copy code The code is as follows:

///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetHash",
//Remember to add double quotes T_T
data: "{ 'key': 'haha', 'value': 'Haha ! ' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert("key: haha ==> " data.d["haha"] "n key: www ==> " data.d["www"]); >                                                                                                                                                                          );
});
///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "data.aspx/GetHash",
//Remember to add double quotes T_T
data: "{ 'key ' : 'haha', 'value': 'Haha! ' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert("key: haha = alert("key: haha = => " data.d["haha"] "n key: www ==> " data.d["www"]);
           },
                error: function(err) {
alert(err "err");
         }
           });


运行结果：

5、操作xml
XMLtest.xml:

复制代码代码如下:

JQuery code:

复制代码代码如下:

$(function() { 
 $("#btnOK").click(function() { 
 $.ajax({ 
 url: "XMLtest.xml", 
 dataType: 'xml', //The returned type is XML, which is different from the previous Json 
 success: function(xml) { 
 success: function(xml) { 
 //Clear the list 
 $("#list") .html(""); 
 //Find xml elements KVM Online Shopping Brush Website Construction Beijing Express Company Ultrasonic Welding Machine 
 $(xml).find("data>item").each(function() $ ("#list").append("Name:" $(this).find("name").text() "
"); , 
             error: function(result, status) { //If there is no above captured error, the callback function here will be executed                                                                                                    >
 //Disable button submission 
 return false; 
 }); 
}); 
$(function() {
 $("#btnOK").click(function() {
                                                                                                                                                                                                                                      ; function(xml) {
                                                                                                                             . > item").each(function() {
                                                                         li>");
                                                                                            ​
         })
          },
              error: function(result, status) { //If there is no capture error above, the callback function here will be executed 
                                                                                                       }
 });