Home >Web Front-end >JS Tutorial >jQuery AJAX implements method sharing for calling page background methods and web service definitions_jquery

jQuery AJAX implements method sharing for calling page background methods and web service definitions_jquery

WBOY
WBOYOriginal
2016-05-16 17:55:371337browse

1. Create a new demo.aspx page.
2. First add a reference to the background file demos.aspx.cs of the page.

using System.Web.Services;
3. Method call without parameters. Please note that this version cannot be lower than .net framework 2.0. 2.0 is no longer supported.
Backend code:

Copy code The code is as follows:

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

JS code:
Copy code The code is as follows:

$(function() {
$("#btnOK").click(function() {
$.ajax({
//To use the post method
type: "Post",
//The page where the method is located and the method name
url: "Demo.aspx/SayHello",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//The returned data uses data.d to obtain the content
alert(data.d);
},
error: function(err) {
alert(err);
}
});

//Disable button Submit
return false;
});
});

Page code:
Copy code The code is as follows:







3. Method call with parameters
Backend code:
Copy code The code is as follows:

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

JS code:
Copy code The code is as follows:

$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "demo.aspx/GetStr",
//The method parameters must be written correctly, str is the name of the formal parameter, str2 is the name of the second formal parameter
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
alert(data.d);
},
error: function(err) {
alert(err);
}
});

//Disable button submission
return false;
} );
});

The operation effect is as follows:

4. Return array method
Backend code:

Copy code The code is as follows:

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

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

return li;
}

JS code:
Copy code The code is as follows:

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

//Recursively obtain data
$(data.d).each(function() {
//Insert the results into li
$("#list").append("
  • " this "
  • ");
    });

    alert(data.d);
    },
    error: function(err) {
    alert(err);
    }
    });

    //Disable button submission
    return false;
    });
    });

    Run result chart:

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn