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="Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
        body
        {
            font-size13px;
        }
        .divFrame
        {
            width225px;
            bordersolid 1px #666;
        }
        .divFrame .divTitle
        {
            padding5px;
            background-color#eee;
            height23px;
        }
        .divFrame .divTitle span
        {
            floatleft;
            padding2px;
            padding-top5px;
        }
        .divFrame .divContent
        {
            padding8px;
            text-aligncenter;
        }
        .divFrame .divContent .clsShow
        {
            font-size14px;
            line-height2.0em;
        }
        .divFrame .divContent .clsShow .clsError
        {
            font-size13px;
            bordersolid 1px #cc3300;
            padding2px;
            displaynone;
            margin-bottom5px;
            background-color#ffe0a3;
        }
        .txt
        {
            border#666 1px solid;
            padding2px;
            width150px;
            margin-right3px;
        }
        .btn
        {
            border#666 1px solid;
            padding2px;
            width50px;
        }
    </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);
%>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM