onsubmit="return validateCode()"的问题

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + ":" + "//" + request.getServerName() + ":" + request.getServerPort() + "/"
            + request.getServletContext().getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录页面</title>
    <style type="text/css">
        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
        }
 
        a:hover {
            text-decoration: underline;
        }
 
        img {
            margin: auto 0px;
        }
    </style>
 
</head>
<body>
<center>
    <h1>用户登录</h1>
    <form action="<%=basePath%>/LoginServlet" method="post" onsubmit="return validateCode()">
        <table width="300px" cellspacing="0px" cellpadding="0px" border="1px">
            <tr>
                <td>用户名</td>
                <td colspan="2"><input type="text" name="username" placeholder="用户名为3-12位字母数字或下划线组合"></td>
            </tr>
            <tr>
                <td>密&nbsp;码</td>
                <td colspan="2"><input type="password" name="password" placeholder="长度为5-12位字母数字或下划线组合"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td style="border-right-style:none;">
                    <input type="text" name="checkCode" maxlength="4" placeholder="请输入验证码" id="code">
                    <img src="<%=basePath%>/kaptcha.jpg" id="changecode"/>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align:center">
                    <input type="submit" value="登录" id="login">
                    <input type="reset" value="取消">
                </td>
            </tr>
        </table>
    </form>
</center>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
        $("#changecode").on("click", function () {
            $(this).attr("src", "<%=basePath%>/kaptcha.jpg?d=" + new Date().getTime());
        });
    });
 
    function validateCode() {
        var ajaxFlag = true;
        $.ajax({
            url: "<%=basePath%>/LoginServlet",
            type: "post",
            data: {
                checkCode: $("input[name=checkCode]").val()
            },
            dataType: "json",
            success: function (result) {
                var flag = result.flag;
                if (flag == false) {
                    alert('验证码输入有误！');
                    ajaxFlag = false;
                }
            }
        });
        if(!ajaxFlag){
            return false;
        }
    }
</script>
</body>
</html>

package com.imooc.servlet;
 
import com.google.code.kaptcha.Constants;
import com.sun.tools.javac.code.Attribute;
import netscape.javascript.JSObject;
import org.json.JSONObject;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintStream;
import java.io.PrintWriter;
 
@WebServlet(name = "LoginServlet")
public class LoginServlet extends HttpServlet {
 
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
        String code = request.getParameter("checkCode");
        String sessionCode = (String) request.getSession().getAttribute("kcode");
        JSONObject jsonObject = null;
 
        System.out.println(code);
        System.out.println(sessionCode);
 
 
        if(code!=null && sessionCode!=null){
            if (code.equalsIgnoreCase(sessionCode)) {
                jsonObject = new JSONObject("{flag:true}");
                response.getOutputStream().write(jsonObject.toString().getBytes("UTF-8"));
 
            } else {
               jsonObject = new JSONObject("{flag:false}");
               response.getOutputStream().write(jsonObject.toString().getBytes("UTF-8"));
            }
        }
 
 
 
        //
 
 
    }
}

还是会提交两次在控制台输出如下，并且验证码输入错误会跳转页面，不能阻止表单的提交。

KAGITO 2018-07-18

源自：项目：商品展示及购物车 5-3 作业题

收起

2回答

chrismorgen 回答被采纳获得+3积分 2018-07-19 12:13:43

因为ajax是异步请求，也就是js中的代码会同时执行，你将var ajaxFlag设置为true，因为是异步执请求，所以js中的代码也会执行，代码执行顺序就变了，return ajaxFlag的代码会先执行，那么validateCode方法一直返回的也就是true了，所以表单会成功跳转，根据你的代码你可以将ajax请求改为同步请求，就可以完成你需要的效果了，如下图所示。这里不建议同学使用ajax，因为ajax就是用来做异步请求的，改为同步请求就没有太大的意义了，建议你可以直接使用js去写，或者之前给你提供的思路，祝学习愉快~

收起回答

chrismorgen 2018-07-18 18:36:59

这里不需要使用json数据的，给你一个思路，你完全可以使用表单提交数据，然后在LoginServlet中获取表单中的用户名、密码、验证码。先判断验证码是否正确，如果正确去检查用户名和密码，如果验证码错误，则重新跳转到Login.jsp页面，表单提交和ajax都将数据提交到了LoginServlet中就会出现你的问题。祝学习愉快~

收起回答

提问者 KAGITO #1

onsubmit="return validateCode()"是作业素材中给的，想知道怎么用

2018-07-18 19:19:42
chrismorgen 回复提问者 KAGITO #2

该方法主要是判断表单是否可以提交，当点击提交按钮时，会触发js中的validateCode()方法，在该方法中我们对验证码进行核对，如果匹配成功，则返回true，允许表单提交，如果匹配失败，则返回false，不提交表单，这就是onsubmit="return validateCode()"的用法，祝学习愉快~

2018-07-19 10:05:24
提问者 KAGITO 回复 chrismorgen #3

所以说我问题中写的validateCode方法用ajax，且写了return false却貌似没有阻止表单的提交，想知道是什么原因。

2018-07-19 10:34:28