javascript - 即使 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

有两个问题:

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完全无关。当在另一种 View 技术(例如 PHP、ASP 等)甚至纯 HTML 页面中使用相同的脚本时，您仍然会遇到完全相同的问题。 JSP 在这个问题的上下文中只是一个 HTML 代码生成器，在将来的问题中最好将其从问题中省略，特别是 HTML+CSS+JS/jQuery。