Net WebForm jQuery Ajax 传值到aspx后台
1.在Net WebForm中，编写aspx文件，有时候想在后台编写类似WebAPI形式的方法。前台使用jQuery Ajax方式调用。【PS：jQuery ajax Get方式将直接走后台Page_Load方法，到不了标记的处理方法。】运行效果：
界面：
返回值：
2.前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryWebMethod.aspx.cs"
Inherits="WebApplication1.JQueryWebMethod" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery ajax GET POST 到后台方法</title>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
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<string>******************/
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');
}
});
};
</script>
</head>
<body>
<div>
<input type="button" value="数据Ajax_Get提交到后台【不可用】" onclick="onGetAjax()" />
<input type="button" value="数据Ajax_Post提交到后台【无参】" onclick="onPostAjax1(this)" />
<input type="button" value="数据Ajax_Post提交到后台【带参返回json】" onclick="onPostAjax(this)" />
<input type="button" value="数据Ajax_Post提交到后台【带参返回list】" onclick="onPostAjax2(this)" />
</div>
</body>
</html>
3.后台代码
先引用System.Web.Services;
然后代码。
public partial class JQueryWebMethod : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 不可直接被前端Get调用
/// </summary>
/// <param name="a"></param>
/// <param name="b"></param>
/// <returns></returns>
[WebMethod]
public static string GetAjax(string a,string b)
{
return "{\"a\":\""+a+"\",\"b\":\""+b+"\"}";
}
/// <summary>
/// AJAX POST可用 【带参，返回json字符串】
/// </summary>
/// <param name="a"></param>
/// <param name="b"></param>
/// <returns></returns>
[WebMethod]
public static string PostAjax(string a, string b)
{
return "{\"a\":\"" + a + "\",\"b\":\"" + b + "\"}";
}
/// <summary>
/// AJAX POST可用 【无参】
/// </summary>
/// <returns></returns>
[WebMethod]
public static string PostAjax1()
{
return "{\"a\":\"返回值1\",\"b\":\"返回值2\"}";
}
/// <summary>
/// AJAX POST可用 【带参，返回List<T>】
/// </summary>
/// <param name="a"></param>
/// <param name="b"></param>
/// <returns></returns>
[WebMethod]
public static List<string> PostAjax2(string a, string b)
{
return new List<string>(){a,b,"值3","值4"};
}
}
