Jquery ajax 簡潔方式提交表單form

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

上載者：User

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

最簡單就這樣

代碼如下	複製代碼
$.post("/index.php?action=ajax&rs=TWProAjax::checkProTermsExisted", $(this).serialize(), function(data){ }，'json');

注意serialize就是把你表單所有input以post形式或get形式提交過去了，下面看個執行個體

我們有一個非常普通的表單：

首先，建立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
                    <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);
%>

最關鍵就是下面這段代碼

代碼如下

複製代碼

   $("#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);
                        }
                    }
                })

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