jquery ajax 实现表单提交和验证表单

矫情吗；* 2024-02-19 13:25 65阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <title>$.ajax()方法发送请求</title>
    
    
        <script src="https://cdn.bootcss.com/jquery/1.4.4/jquery.min.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
                    ({ //请求登录处理页
                    	type: "GET",//请求方式 "POST" 或 "GET"， 默认为 "GET"
                        url: "login.jsp", //登录处理页
                        dataType: "html",
                        //传送请求数据
                        data: { txtName: strTxtName, txtPass: strTxtPass },
                        success: function (strValue) { //登录成功后返回的数据
                            //根据返回值进行状态显示
                           if (strValue == "True") {//注意是True,不是true
                        	   
                                $(".clsShow").html(strValue);
                            }
                            else if (strValue != "True"){
                            	
                                $("#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>

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <%
    String strName = request.getParameter("txtName");
    String strPass = request.getParameter("txtPass");
    boolean login = false;
    if(strName.equals("uid")&&strPass.equals("pwd")){
    	login = true;
    }
    
    out.print(login);
    %>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/da074d96295a4bd591cfbc9c2d7800df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0004305514bd4423b22c208fb413af23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5rUGV0_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/33ca55465e3244858b6730220bb5dc10.png