jQuery實(shí)現(xiàn)form表單基于ajax無刷新提交方法詳解
本文實(shí)例講述了jQuery實(shí)現(xiàn)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()方法發(fā)送請(qǐng)求</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();//輸入焦點(diǎn) $("#txtName").keydown(function (event) { if (event.which == "13") {//回車鍵,移動(dòng)光標(biāo)到密碼框 $("#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()); //開始發(fā)送數(shù)據(jù) $.ajax ({ //請(qǐng)求登錄處理頁 url: "Login.aspx", //登錄處理頁 dataType: "html", //傳送請(qǐng)求數(shù)據(jù) data: { txtName: strTxtName, txtPass: strTxtPass }, success: function (strValue) { //登錄成功后返回的數(shù)據(jù) //根據(jù)返回值進(jìn)行狀態(tài)顯示 if (strValue == "True") {//注意是True,不是true $(".clsShow").html("操作提示,登錄成功!" + strValue); } else { $("#divError").show().html("用戶名或密碼錯(cuò)誤!" + 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,接收并處理數(shù)據(jù):
<%@ 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); %>
補(bǔ)充:form使用AJAX提交完整實(shí)例:
//將form轉(zhuǎn)換為AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //將form中的值轉(zhuǎn)換為鍵值對(duì) 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; } /* //前臺(tái)調(diào)用方式 function autoSubmitFun(){ ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){}); } */
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery動(dòng)態(tài)改變form屬性提交表單
- jQuery動(dòng)態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
- Jquery.Form 異步提交表單的簡單實(shí)例
- Jquery基于Ajax方法自定義無刷新提交表單Form實(shí)例
- jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
- jquery中validate與form插件提交的方式小結(jié)
- jQuery改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼
- jQuery ajax提交Form表單實(shí)例(附demo源碼)
- jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
相關(guān)文章
jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法
這篇文章主要介紹了jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法,實(shí)例分析了兩種支持動(dòng)態(tài)參數(shù)的函數(shù)綁定技巧,需要的朋友可以參考下2015-03-03Jquery find與filter函數(shù)區(qū)別 說明
基本是find子元素找,filter是平級(jí)找2010-05-05使用jquery hover事件實(shí)現(xiàn)表格的隔行換色功能示例
hover(over,out)一個(gè)模仿懸停事件的方法,下面一個(gè)示例為大家詳細(xì)介紹下使用jquery實(shí)現(xiàn)表格的隔行換色功能,感興趣的朋友可以參考下2013-09-09跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
前天在項(xiàng)目中寫的一個(gè)ajax jsonp的使用,出現(xiàn)了問題:可以成功獲得請(qǐng)求結(jié)果,但沒有執(zhí)行success方法2011-10-10