zoukankan      html  css  js  c++  java
  • 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);
    %>
    
  • 相关阅读:
    malloc函数具体解释
    Linux pipe函数
    秒杀多线程第四篇 一个经典的多线程同步问题
    LayoutInflater
    D3DXMatrixMultiply 函数
    用qsort排序
    Memcahce(MC)系列(一)Memcache介绍、使用、存储、算法、优化
    ANDROID L——Material Design综合应用(Demo)
    图像切割之(五)活动轮廓模型之Snake模型简单介绍
    uva 10054 The Necklace(欧拉回路)
  • 原文地址:https://www.cnblogs.com/zhouhb/p/2867391.html
Copyright © 2011-2022 走看看