jQuery调用页面后台方法

1.新建default.aspx页面

2.添加引用

首先在该页面的后台文件default.aspx.cs中添加引用。

using System.Web.Services;

• 1

3.调用后台无参方法

后台代码：

//【注意事项一】，要添加[WebMethod]特性
[WebMethod]
//【注意事项二】，一定是静态方法
public static string GetResult()
{
    return "guoguo";
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

js代码：

$(document).ready(function () {
    $("#btnNoParameters").click(function () {
        $.ajax({
            type: "Post",
            url: "default.aspx/GetResult",
            contentType: "application/json; charset=utf-8",
            dataType: "json",//表示后台返回的数据是json对象
            success: function (data) {
                //由于dataType=json
                //系统会根据后台返回的数据returnValue自动生成一个key=d、value=returnValue的json对象
                //此处的data是json对象
                //我们就可以用data.d获取返回的数据
                alert("data.d=" + data.d);
            },
            error: function (error) {
                alert("error=" + error);
            }
        });
    });
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

运行结果：

4.调用后台含参方法

后台代码：

[WebMethod]
public static double GetSum(string num1, string num2)
{
    return double.Parse(num1) + double.Parse(num2);
}

• 1
• 2
• 3
• 4
• 5

js代码：
传参数的时候参数值一定要记得加”，使之成为json字符串。
json字符串简化过程如下：
1、最标准的json字符串

data: "{ \"userId\": \"2016007\", \"userName\": \"零零七\", \"gender\": \"男\" }"

• 1

2、把\”换成’

data: "{ 'userId': '2016007', 'userName': '零零七', 'gender': '男' }"

• 1

3、去掉key两端的’

data: "{ userId: '2016007', userName: '零零七', gender: '男' }"

• 1

4、去掉value两端的’，如果value的类型是int、float或bool类型那不加单引号也可以，如果value是字符串类型那必须加单引号

data:"{userId:2016007,userName:'零零七',gender:'男'}"

• 1

后台方法如下：

[WebMethod]
public static Dictionary<string, object> Insert(string userId, string userName, string gender)
{}
[WebMethod]
public static Dictionary<string, object> Insert(string userId, string userName)
{}
[WebMethod]
public static Dictionary<string, object> Insert()
{  //优先匹配参数最少的
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

这三个重载的方法都能匹配前台所需的方法，但是优先匹配参数最少的，一个方法执行后其他重载方法便不再执行。

5.返回double

后台代码：

[WebMethod]
public static double GetSum(string num1, string num2)
{
    return double.Parse(num1) + double.Parse(num2);
}

• 1
• 2
• 3
• 4
• 5

js代码：

function ParametersFunc() {
    $.ajax({
        type: "Post",
        url: "default.aspx/GetSum",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //num1是GetSum第一个形参的名字，num2是第二个形参的名字
        //data:"{num1:'12',num2:'13'}",
        data: "{num1:'" + $("#Text1").val() + 
        "',num2:'" + $("#Text2").val() + "'}",
        success: function (data) {
            //用data.d获取返回的数据
            //由于GetSum的返回值是double类型，所以data.d是数字类型
            //如果返回在是整型那data.d就是整型，如果返回值是小数类型那data.d就是float或double类型
            alert("data.d=" + data.d);
        },
        error: function (error) {
            alert("error=" + error);
        }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

运行结果：

6.返回数组

后台代码：

//[WebMethod]
//public static List<string> GetArray()
//{
//    return new List<string> { "first","second","third"};
//}

[WebMethod]
public static string[] GetArray()
{
    return new string[] { "first", "second", "third" };
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

js代码：

function ReturnArray() {
    alert("进入ReturnArray()方法");
    $.ajax({
        type: "Post",
        url: "default.aspx/GetArray",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //用data.d获取返回的数据
            //由于GetArray的返回值类型是string[]，所以data.d是数组对象类型
            $(data.d).each(function () {
                //插入前先清空ul      
                $("#list").html(""); 
                $("#list").append("<li>" + this + "</li>");
            });
        },
        error: function (error) {
            alert("error=" + error);
        }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

运行结果：

7.返回Dictionary

后台代码：

public partial class _default : System.Web.UI.Page
{
    [WebMethod]
    public static Dictionary<string, object> GetDictionary()
    {
        Dictionary<string, object> dict = 
        new Dictionary<string, object>();
        dict.Add("success", true);
        dict.Add("info", "蝈蝈");
        dict.Add("model", new Model("guoguo", 18, "18233399999"));
        return dict;
    }
}
class Model
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Phone { get; set; }
    public Model(string name,int age,string phone)
    {
        this.Name = name;
        this.Age = age;
        this.Phone = phone;
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

js代码：

function ReturnDictFunc() {
    $.ajax({
        type: "Post",
        url: "default.aspx/GetDictionary",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //用data.d获取返回的数据
            //由于GetDictionary的返回值类型是Dictionary<string, object>，所以data.d是对象类型
            alert("data.d=" + data.d);
            //读取Dictionary中每个元素的值（严格限制大小写）
            alert("data.d.success=" + data.d.success + "\r\n" +
            "data.d.info=" + data.d.info + "\r\n" +
            "data.d.model.Name=" + data.d.model.Name + "\r\n" +
            "data.d.model.Age=" + data.d.model.Age + "\r\n" +
            "data.d.model.Phone=" + data.d.model.Phone);
        },
        error: function (error) {
            alert("error=" + error);
        }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

运行结果：

8.返回json字符串

后台代码：

[WebMethod]
public static string GetJson(string param1,int param2)
{
    return "{ \"name\":\"guo\", \"age\":\"18\", \"content\":{\"phone\":\"18233199999\",\"address\":\"唐宁街10号\"} }";
}

• 1
• 2
• 3
• 4
• 5

js代码，dataType=json：

function ReturnJson() {
    $.ajax({
        type: "post",
        url: "default.aspx/GetJson",
        contentType: "application/json;charset=utf-8;",
        data: "{ 'param1': 'abc', 'param2': '12' }",
        dataType: "json",
        success: function(data) {
            //用data.d获取返回的数据
            //由于GetJson的返回值类型是string，所以data.d是字符串类型
            //即使data.d是json字符串，也不能直接通过key来获取value，
            //需要先把json字符串转换为json对象
            alert("data.d=" + data.d);
            var json = eval('(' + data.d + ')');
            alert("json=" + json);
            //访问对象中的成员既可以用.或[]，两者能混用
            alert("json.name=" + json.name);
            alert("json.age=" + json.age);
            alert("json.content.phone=" + json.content.phone);
            alert("data[d]=" + data["d"]);
            alert("json[name]=" + json["name"]);
            alert("json[age]=" + json["age"]);
            alert("json[content][content]=" + json["content"]["phone"]);
            alert("json[content].content=" + json["content"].phone);
        },
        error: function(error) {}
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

js代码，dataType=text：

function ReturnJson() {
    $.ajax({
        type: "post",
        url: "default.aspx/GetJson",
        contentType: "application/json;charset=utf-8;",
        //data: "{ \"param1\": \"abc\", \"param2\": \"12\" }",
        //data: "{ 'param1': 'abc', 'param2': '12' }",
        //data: "{ param1: 'abc', param2: '12' }",
        data: "{ param1: 'abc', param2: 12 }",
        dataType: "text",
        success: function (data) {
            //由于dataType=text所以data是字符串类型，
            //所以我们需要先把data转换成json对象jsonData，
            //然后再把jsonData中key=d的值转换成json对象jsonValue，
            //此处的jsonData等价于dataType=json时，function接收的参数data
            var jsonData = eval('(' + data + ')');
            var jsonValue = eval('(' + jsonData.d + ')');
            alert("data=" + data + "\r\n" +
                  "jsonData.d=" + jsonData.d + "\r\n" +
                  "jsonValue.name=" + jsonValue.name + "\r\n" +
                  "jsonValue.age=" + jsonValue.age + "\r\n" +
                  "jsonValue.content.phone=" + jsonValue.content.phone + "\r\n" +
                  "jsonData[d]=" + jsonData["d"] + "\r\n" +
                  "jsonValue[name]=" + jsonValue["name"] + "\r\n" +
                  "jsonValue[age]=" + jsonValue["age"] + "\r\n" +
                  "jsonValue[content][phone]=" + jsonValue["content"]["phone"] + "\r\n" +
                  "jsonValue[content].phone=" + jsonValue["content"].phone);
        },
        error: function (error) { }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

运行结果：