這篇文章將為大家詳細(xì)講解有關(guān)jQuery如何實現(xiàn)form表單基于ajax無刷新提交方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元元氏做網(wǎng)站,已為上家服務(wù),為元氏各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

本文實例講述了jQuery實現(xiàn)form表單基于ajax無刷新提交方法。分享給大家供大家參考，具體如下：

首先，新建Login.html頁面：

 
 
 
 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;
 }
 
 
 $(function () {
  $("#txtName").focus();//輸入焦點
  $("#txtName").keydown(function (event) {
  if (event.which == "13") {//回車鍵,移動光標(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
  ({ //請求登錄處理頁
   url: "Login.aspx", //登錄處理頁
   dataType: "html",
   //傳送請求數(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("用戶名或密碼錯誤！" + strValue);
   }
   }
  })
  })
 })
 


 
 
 
  用戶登錄