jQuery使用$.ajax提交表單完整執行個體

jQuery使用$.ajax提交表單完整執行個體_jquery

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了jQuery使用$.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="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);%>

希望本文所述對大家jQuery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More