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
运行结果: