首先建立一个Ajax接受页面,暂时使用GET方式获取数据,后台代码如下:
namespace WebApp
{
public partial class Index1Ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(GetRequestParamByGET("UserName"));
Response.End();
}
/// <summary>
/// 获取GET方式传入的参数
/// </summary>
/// <param name="strKey">参数名</param>
/// <returns></returns>
private string GetRequestParamByGET(string strKey)
{
string strTemp = string.Empty;
if (Request.QueryString[strKey]!=null)
{
strTemp = Request.QueryString[strKey];
}
else
{
strTemp = "未传入参数:["+strKey+"]";
}
return strTemp;
}
}
}
一般情况下我们这样使用AJAX方法,代码如下
注意这句代码:
data: { UserName: $("#txtUserName").val() },
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery序列化元素DEMO1</title>
<script src="Public/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSave").click(function() {
$.ajax({
type: "GET",
url: "Index1Ajax.aspx",
data: { UserName: $("#txtUserName").val() },
beforeSend: function() {
$("#divResult").html("数据加载中请稍候.....");
},
success: function(data, textStatus) {
alert("操作成功返回数据:" + data);
$("#divResult").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("操作失败返回XMLHttpRequest:" + XMLHttpRequest.readyState);
alert("操作失败返回状态:" + textStatus);
alert("操作失败返回errorThrown:" + errorThrown);
},
complete: function(XMLHttpRequest, textStatus) {
alert("操作完成返回XMLHttpRequest:" + XMLHttpRequest.readyState);
alert("操作完成返回状态:" + textStatus);
}
});
});
});
</script>
</head>
<body>
<form id="form1" action="#">
<p>
Serialize方法示例:</p>
<p>
姓名:
<input id="txtUserName" type="text" name="UserName" /></p>
<p>
<input id="btnSave" type="button" value="提交" /></p>
<p>
</p>
<div id="divResult" style="color: Red;">
</div>
</form>
</body>
</html>
这种方式在只有少量表单元素的时候,还可以使用,如果表单元素过多的话,就会重复性动作太多...
所以就有了serialize()方法
着重注意:
data: $("#form1").serialize(),<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery序列化元素DEMO1</title>
<script src="Public/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSave").click(function() {
$.ajax({
type: "GET",
url: "Index1Ajax.aspx",
data: $("#form1").serialize(),
beforeSend: function() {
$("#divResult").html("数据加载中请稍候.....");
},
success: function(data, textStatus) {
alert("操作成功返回数据:" + data);
$("#divResult").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("操作失败返回XMLHttpRequest:" + XMLHttpRequest.readyState);
alert("操作失败返回状态:" + textStatus);
alert("操作失败返回errorThrown:" + errorThrown);
},
complete: function(XMLHttpRequest, textStatus) {
alert("操作完成返回XMLHttpRequest:" + XMLHttpRequest.readyState);
alert("操作完成返回状态:" + textStatus);
}
});
});
});
</script>
</head>
<body>
<form id="form1" action="#">
<p>
Serialize方法示例:</p>
<p>
姓名:
<input id="txtUserName" type="text" name="UserName" /></p>
<p>
<input id="btnSave" type="button" value="提交" /></p>
<p>
</p>
<div id="divResult" style="color: Red;">
</div>
</form>
</body>
</html>
serialize()方法作用于一个jquery对象,它能够将DOM元素内容序列化字符串
也可对中文字符解决编码问题造成的乱码
如$("#txtUserName").val().serialize();
附件地址:
https://files.cnblogs.com/liangwei389/Jquery%e5%ba%8f%e5%88%97%e5%8c%96%e5%85%83%e7%b4%a0.rar
