ajax,html,aspx,Net WebForm jQuery Ajax 传值到aspx后台

1.在Net WebForm中，编写aspx文件，有时候想在后台编写类似WebAPI形式的方法。前台使用jQuery Ajax方式调用。【PS：jQuery ajax Get方式将直接走后台Page_Load方法，到不了标记的处理方法。】运行效果：

界面：

返回值：

2.前台代码

Inherits="WebApplication1.JQueryWebMethod" %>

jQuery ajax GET POST 到后台方法

function onGetAjax() {

/********************************/

window.alert('jquery ajax get方式无法直接调用aspx.cs后台方法！！！谨记！！！');

return;

/********************************/

$.ajax({

type: 'get',

url: 'JQueryWebMethod.aspx/GetAjax?a=121&b=122',

contentType: 'application/x-www-form-urlencoded;charset=utf-8', //请求头格式，key/value

dataType: 'json', //返回值格式，json

success: function (data) {

var jsonObj = JSON.parse(data.d);

console.log('get:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);

},

error: function (data) {

console.log(data);

}

});

};

/***************带参******************/

function onPostAjax(obj) {

$.ajax({

type: 'post',

url: 'JQueryWebMethod.aspx/PostAjax',

contentType: 'application/json;charset=utf-8', //请求头格式，json

dataType: 'json', //返回值格式，json

data: "{'a':'0','b':'1'}",

beforeSend: function () {

//禁用按钮，加遮罩层等

$(obj).attr('disabled', 'disabled');

},

success: function (data) {

var jsonObj = JSON.parse(data.d);

console.log('post:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);

},

error: function (data) {

var errMsg = data.responseJSON.Message;

console.log(errMsg);

},

complete: function () {

//启用按钮，取消遮罩层等

$(obj).removeAttr('disabled');

}

});

};

/***************无参******************/

function onPostAjax1(obj) {

$.ajax({

type: 'post',

url: 'JQueryWebMethod.aspx/PostAjax1',

contentType: 'application/json;charset=utf-8', //请求头格式，json

dataType: 'json', //返回值格式，json

beforeSend: function () {

//禁用按钮，加遮罩层等

$(obj).attr('disabled', 'disabled');

},

success: function (data) {

var jsonObj = JSON.parse(data.d);

console.log('post:a=' + jsonObj["a"] + ',b=' + jsonObj["b"]);

},

error: function (data) {

var errMsg = data.responseJSON.Message;

console.log(errMsg);

},

complete: function () {

//启用按钮，取消遮罩层等

$(obj).removeAttr('disabled');

}

});

};

/***************带参返回List******************/

function onPostAjax2(obj) {

$.ajax({

type: 'post',

url: 'JQueryWebMethod.aspx/PostAjax2',

contentType: 'application/json;charset=utf-8', //请求头格式，json

dataType: 'json', //返回值格式，json

data: "{'a':'值1','b':'值2'}",

beforeSend: function () {

//禁用按钮，加遮罩层等

$(obj).attr('disabled', 'disabled');

},

success: function (data) {

var jsonObj = data.d;

$.each(jsonObj, function (index, value) {

console.log('post:index=' + index + ',value=' + value);

});

},

error: function (data) {

var errMsg = data.responseJSON.Message;

console.log(errMsg);

},

complete: function () {

//启用按钮，取消遮罩层等

$(obj).removeAttr('disabled');

}

});

};

3.后台代码

先引用System.Web.Services;

然后代码。

public partial class JQueryWebMethod : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

///

/// 不可直接被前端Get调用

///

///

///

///

[WebMethod]

public static string GetAjax(string a,string b)

{

return "{\"a\":\""+a+"\",\"b\":\""+b+"\"}";

}

///

/// AJAX POST可用 【带参，返回json字符串】

///

///

///

///

[WebMethod]

public static string PostAjax(string a, string b)

{

return "{\"a\":\"" + a + "\",\"b\":\"" + b + "\"}";

}

///

/// AJAX POST可用 【无参】

///

///

[WebMethod]

public static string PostAjax1()

{

return "{\"a\":\"返回值1\",\"b\":\"返回值2\"}";

}

///

/// AJAX POST可用 【带参，返回List】

///

///

///

///

[WebMethod]

public static List PostAjax2(string a, string b)

{

return new List(){a,b,"值3","值4"};

}

}