jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考，具体如下：
首先，新建Login.html页面：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$.ajax()方法发送请求</title>
<scripttype="text/javascript"src="jquery-1.4.1.js"></script>
<styletype="text/css">
body
{
font-size:13px;
}
.divFrame
{
width:225px;
border:solid1px#666;
}
.divFrame.divTitle
{
padding:5px;
background-color:#eee;
height:23px;
}
.divFrame.divTitlespan
{
float:left;
padding:2px;
padding-top:5px;
}
.divFrame.divContent
{
padding:8px;
text-align:center;
}
.divFrame.divContent.clsShow
{
font-size:14px;
line-height:2.0em;
}
.divFrame.divContent.clsShow.clsError
{
font-size:13px;
border:solid1px#cc3300;
padding:2px;
display:none;
margin-bottom:5px;
background-color:#ffe0a3;
}
.txt
{
border:#6661pxsolid;
padding:2px;
width:150px;
margin-right:3px;
}
.btn
{
border:#6661pxsolid;
padding:2px;
width:50px;
}
</style>
<scripttype="text/javascript">
$(function(){
$("#txtName").focus();//输入焦点
$("#txtName").keydown(function(event){
if(event.which=="13"){//回车键,移动光标到密码框
$("#txtPass").focus();
}
});
$("#txtPass").keydown(function(event){
if(event.which=="13"){//回车键，用.ajax提交表单
$("#btnLogin").trigger("click");
}
});
$("#btnLogin").click(function(){//“登录”按钮单击事件
//获取用户名称
varstrTxtName=encodeURI($("#txtName").val());
//获取输入密码
varstrTxtPass=encodeURI($("#txtPass").val());
//开始发送数据
$.ajax
({//请求登录处理页
url:"Login.aspx",//登录处理页
dataType:"html",
//传送请求数据
data:{txtName:strTxtName,txtPass:strTxtPass},
success:function(strValue){//登录成功后返回的数据
//根据返回值进行状态显示
if(strValue=="True"){//注意是True,不是true
$(".clsShow").html("操作提示，登录成功！"+strValue);
}
else{
$("#divError").show().html("用户名或密码错误！"+strValue);
}
}
})
})
})
</script>
</head>
<body>
<formid="frmUserLogin">
<divclass="divFrame">
<divclass="divTitle">
<span>用户登录</span>
</div>
<divclass="divContent">
<divclass="clsShow">
<divid="divError"class="clsError">
</div>
<div>
名称：<inputid="txtName"type="text"class="txt"/></div>
<div>
密码：<inputid="txtPass"type="password"class="txt"/></div>
<div>
<inputid="btnLogin"type="button"value="登录"class="btn"/>  
<inputid="btnReset"type="reset"value="取消"class="btn"/>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
然后，新建Login.aspx，接收并处理数据：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Login.aspx.cs"Inherits="JSDemo.Login"ResponseEncoding="gb2312"%>
<%
stringstrName=System.Web.HttpUtility.UrlDecode(Request["txtName"]);
stringstrPass=System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
boollogin=false;
if(strName=="admin"&&strPass=="admin")
{
login=true;
}
Response.Write(login);
%>
希望本文所述对大家jQuery程序设计有所帮助。