jQuery實現(xiàn)form表單基于ajax無刷新提交方法實例代碼

更新時間：2019年11月04日 08:46:26 作者：獨孤求敗

在本篇文章里小編給大家整理了關于jQuery實現(xiàn)form表單基于ajax無刷新提交方法實例代碼，需要的朋友們參考下。

本文實例講述了jQuery實現(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ā)送請求</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());
  //開始發(fā)送數(shù)據(jù)
  $.ajax
  ({ //請求登錄處理頁
   url: "Login.aspx", //登錄處理頁
   dataType: "html",
   //傳送請求數(shù)據(jù)
   data: { txtName: strTxtName, txtPass: strTxtPass },
   success: function (strValue) { //登錄成功后返回的數(shù)據(jù)
   //根據(jù)返回值進行狀態(tài)顯示
   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，接收并處理數(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);
%>

補充：form使用AJAX提交完整實例：

//將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)換為鍵值對
 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;
 }
/*
 //前臺調(diào)用方式
 function autoSubmitFun(){
  ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
 }
*/

以上就是關于jQuery實現(xiàn)ajax無刷新提交的全部知識點，感謝大家的學習和對腳本之家的支持。

您可能感興趣的文章: