jQuery中使用$.ajax提交表單

最後更新：2018-12-06 來源：互聯網

上載者：User

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

首先，建立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="Scripts/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" />&nbsp;&nbsp                    <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);%>

本文章原先以中文撰寫並發佈於 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