jQuery for form form ajax-based submission method Detailed

This paper describes examples of jQuery for ajax no refresh form based on form submission method. Share to you for your reference, as follows:

First, create Login.html page:

<!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 
  {click (function () {// "Login" button click event 
    // Get the user name
   border: Solid 1px # 666; 
   padding: 2px; 
   width: 50px; 
  } 
 </ style> 
 <Script type = "text / JavaScript"> 
  $ (function () { 
   . $ ( "# txtName") Focus (); // input focus 
   $ ( "# txtName"). keyDown (function (Event) { 
    IF (event.which == "13 is") {// return key, the cursor moves to the password box 
     $ ( "# txtPass"). focus ( ); 
    } 
   }); 
   $ ( "# txtPass") keyDown (function (Event) {. 
    IF (event.which == "13 is") {// return key, the form is submitted with .ajax 
     $ ( "# btnLogin" ) .trigger ( "the click"); 
    } 
   }); 
   . $ ( "# btnLogin") the click (function () {// "Login" button click event 
    var strTxtName = encodeURI ($ ( "#txtName ") Val ());. 
    // get password 
    (. $ ( "# txtPass") Val ()) = var strTxtPass the encodeURI; 
    // start sending data 
    $ .ajax 
    ({// login request processing page 
     url: "Login.aspx", // login process page 
     dataType: "HTML", 
     // data transfer request 
     data: {txtName: strTxtName, txtPass : strTxtPass}, 
     the function (strValue) {// login is successful: success the returned data 
      // based on the return value status display 
      if (strValue == "True") {// Note that True, not to true 
       $ (. "clsShow"). HTML ( "operating tips, log on success!" + strValue) ; 
      } 
      the else { 
       .. $ ( "# divError") Show () HTML ( "user name or password wrong!" + 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>

Then, the Login.aspx new, receive and process data:

<%@ 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);
%>

Supplementary: form using AJAX to submit a complete example:

//将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 || '';
   }
  });
  O return;
 } 
/ * 
 // called by the foreground 
 function autoSubmitFun () { 
   ajaxSubmit ( "autoSumitScoreAJAX.action", $ ( '# formId'), function () {}); 
 } 
* /

jQuery for form form ajax-based submission method Detailed

Guess you like