溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
關于“jQuery如何實現form表單基于ajax無刷新提交方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
