即使 JavaScript 验证返回 false，JSP 表单仍会提交

Question

我有一个格式为“deleteCont”的 JSP 和一个带有函数“validateDelete”的 javascript 文件。当我单击“删除联系人”按钮时，成功调用了“validateDelete”函数并显示带有“alertmessage”的警报。但是，即使返回 false，仍会调用“ContactMaint”servlet。请问谁能告诉我哪里出错了？

<form name="deleteCont"
    onsubmit="return validateDelete('${sessionScope.account}','${sessionScope.firstname}', '${sessionScope.lastname}')" 
    action="ContactMaint" method="post">
    <input type="submit" value="Delete contact" name="delContact">
</form>   



function validateDelete(account, contactFirstName, contactLastName) {
    urlstrg = "http://localhost:8080/SalesPoliticalMapping/JCheckContacts?account=" +
        account + "&firstname=" + contactFirstName + "&lastname=" + contactLastName;
    $.get(urlstrg, function (result, status) {
        if (result.length > 0) {
            var alertmessage = "Can't delect contact:";
            for (var i = 0; i < result.length; i++) {
                alertmessage += result[i];
            }
            alert(alertmessage);
            return false;
        }
    });
}

我现在修改了我的代码如下，虽然我不完全确定为什么：

function validateDelete(account, contactFirstName, contactLastName) {
$.ajaxSetup({async: false});
urlstrg = "http://localhost:8080/SalesPoliticalMapping/JCheckContacts?account=" +  account + "&firstname=" + contactFirstName + "&lastname=" + contactLastName;

var valid = true;
var alertmessage = "";

$.get(urlstrg, function(result, status) {
   if (result.length > 0) {
   valid = false;    
   alertmessage = "Can't delect contact:";
   for (var i = 0; i < result.length; i++) {
       alertmessage += result[i];
        }
   }
 });

 if (valid===false) {
     alert(alertmessage);
 return false;}
 };

Answer 1

有2个问题：

1. 您正在触发一个 ajax 请求。 Ajax 请求默认是异步的。在调用$.get() 之后，代码立即进入下一行，而异步请求在后台运行在一个完全不同的线程中。因为在您的情况下，$.get() 之后显然没有任何内容，它会立即返回（隐含为true）。

2. 您从回调函数返回，而不是从主函数返回。回调函数只返回到主函数中，而不是外部。你需要从主函数返回。

一种方法是始终返回 false 并在成功时显式提交表单。

function validateDelete(...) {
    var $form = $(this);

    $.get(..., function(...) {

        if (success) {
            $form.submit();
        }
    });

    return false;
}

另一种方法是通过将{ async: false } 选项作为$.get() 的第二个参数传递来使ajax 请求异步。

function validateDelete(...) {
    var valid = false;

    $.get(..., { async: true }, function(...) {

        if (success) {
            valid = true;
        }
    });

    return valid;
}

---

请注意，这个问题与 JSP 完全无关。在另一种视图技术（如 PHP、ASP 等）甚至是纯 HTML 页面中使用相同的脚本时，您仍然会遇到完全相同的问题。在这个问题的上下文中，JSP 只是一个 HTML 代码生成器，在未来的问题中，特别是 HTML+CSS+JS/jQuery，可以更好地从问题中省略。