本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考，具体如下：
首先，新建Login.html页面：
<!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>
<title>$.ajax()方法发送请求</title>
<script type=\"text/javascript\" src=\"js/jquery-1.4.1.js\"></script>
<style type=\"text/css\">
body
{
font-size: 13px;
}
.divFrame
{
width: 225px;
border: solid 1px #666;
}
.divFrame .divTitle
{
padding: 5px;
background-color: #eee;
height: 23px;
}
.divFrame .divTitle span
{
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: solid 1px #cc3300;
padding: 2px;
display: none;
margin-bottom: 5px;
background-color: #ffe0a3;
}
.txt
{
border: #666 1px solid;
padding: 2px;
width: 150px;
margin-right: 3px;
}
.btn
{
border: #666 1px solid;
padding: 2px;
width: 50px;
}
</style>
<script type=\"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 () { //“登录”按钮单击事件
//获取用户名称
var strTxtName = encodeURI($(\"#txtName\").val());
//获取输入密码
var strTxtPass = 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>
<form id=\"frmUserLogin\">
<div class=\"divFrame\">
<div class=\"divTitle\">
<span>用户登录</span>
</div>
<div class=\"divContent\">
<div class=\"clsShow\">
<div id=\"divError\" class=\"clsError\">
</div>
<div>
名称：<input id=\"txtName\" type=\"text\" class=\"txt\" /></div>
<div>
密码：<input id=\"txtPass\" type=\"password\" class=\"txt\" /></div>
<div>
<input id=\"btnLogin\" type=\"button\" value=\"登录\" class=\"btn\" />
<input id=\"btnReset\" type=\"reset\" value=\"取消\" class=\"btn\" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
然后，新建Login.aspx，接收并处理数据：
<%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeBehind=\"Login.aspx.cs\" Inherits=\"JSDemo.Login\" ResponseEncoding=\"gb2312\"%>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request[\"txtName\"]);
string strPass = System.Web.HttpUtility.UrlDecode(Request[\"txtPass\"]);
bool login = false;
if (strName == \"admin\" && strPass == \"admin\")
{
login = true;
}
Response.Write(login);
%>
补充：form使用AJAX提交完整实例：
//将form转换为AJAX提交
function ajaxSubmit(url,frm,fn){
var dataPara=getFormJson(frm);
$.ajax({
url:url,
type:\"post\",
data:dataPara,
async:false,
dataType:\'txt\',
success:fn
});
}
//将form中的值转换为键值对
function getFormJson(frm){
var o={};
var a=$(frm).serializeArray();
$.each(a,function(){
if(o[this.name]!==undefined){
if(!o[this.name].push){
o[this.name]=[o[this.name]];
}
o[this.name].push(this.value || \'\');
}else{
o[this.name]=this.value || \'\';
}
});
return o;
}
/*
//前台调用方式
function autoSubmitFun(){
ajaxSubmit(\"autoSumitScoreAJAX.action\",$(\'#formId\'),function(){});
}
*/
以上就是关于jQuery实现ajax无刷新提交的全部知识点，感谢大家的学习和对的支持。
© 版权声明
THE END
暂无评论内容