jQuery实现form表单基于ajax无刷新提交方法详解
Posted l9l99
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现form表单基于ajax无刷新提交方法详解相关的知识，希望对你有一定的参考价值。
本文实例讲述了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实现form表单基于ajax无刷新提交方法详解的主要内容，如果未能解决你的问题，请参考以下文章