表单 OnSubmit 等待 jQuery Ajax 返回？

Posted 2023-02-22

【中文标题】表单 OnSubmit 等待 jQuery Ajax 返回？

【英文标题】：Form OnSubmit to wait jQuery Ajax Return?

【发布时间】：2013-01-10 13:39:25

【问题描述】：

我想在表单onsubmit 和return true 上触发$.ajax，只有在Ajax 返回有效之后。

例如：

<form id="myForm" onsubmit="return ajaxValidation();">
    <input id="myString" name="myString" type="text" />
    <input type="submit" value="Submit" />
</form>

在 javascript 中：

function ajaxValidation() 
    $.ajax(
        async: false,
        type: "POST",
        url: "ajax.php",
        data:  myString: $("#myString").val() 
    ).success(function( response ) 
        alert(response); //Got 'ok'
        if (response=="ok") 
            return true; //mark-1
         else 
            alert("Oh, string is wrong. Form Submit is cancelled.");
        
    );
    return false; //mark-2

当我提交时，我收到了警报 ok，但它返回了“false”，因为它跳转到了最后一行 return false。

为什么？我不明白。实际上，它应该打到return true 行。 （而且，即使在return true 之后，该函数也应该停止在那里并从中退出）

所以现在的意思是，父函数does NOT wait 向Ajax 返回。相反，它不断地运行到最后。请知道为什么。如何让父函数等待Ajax？

【问题讨论】：

只有一个 return 会影响 ajaxValidation 函数，即标记为 2 的返回，其余在另一个函数中。

类似***.com/questions/12171642/…

【参考方案1】：

由于 AJAX 是异步的，因此在提交按钮上使用单击处理程序会更好地进行验证。

以下是基于删除内联onSubmit

$(function() 

    var $form = $('#myForm');

    $form.find('input[type="submit"]').click(function() 
        $.ajax(
           /* async: false,  this is deprecated*/
            type: "POST",
            url: "ajax.php",
            data: 
                myString: $("#myString").val()
            
        ).success(function(response) 
            alert(response); //Got 'ok'
            if(response == "ok") 
             /*  submit the form*/
                $form.submit();
             else 
                alert("Oh, string is wrong. Form Submit is cancelled.");
            
        ); /* prevent default when submit button clicked*/
        return false;

    );
);

【讨论】：

它会起作用的。但我想处理OnSubmit事件的真实形式。

这样做会变得更加复杂。需要使用onSubmit的原因是什么？

因为，表单 submit 事件仅由该按钮控制/依赖于该按钮。不是<form> 元素的真正submit 句柄。

显然，如果您的提交事件仅由该按钮处理，而不是真正的提交句柄，则可能存在垃圾邮件机器人。 OnSubmit 是最终的处理程序，无论是通过按下按钮或在文本字段中输入，甚至通过机器人脚本提交的表单。您的方式，表单提交仅由该按钮处理，如果我在其他输入字段上按 Enter 怎么办？如果机器人仍然触发提交怎么办？

你在抽什么？你不能依赖 javascript 来保护任何东西。用户可以轻松关闭它，或者垃圾邮件发送者可以轻松地在页面上运行脚本并填写表单并提交，而无需输入任何内容或触摸表单控件。唯一真正的保护是在服务器上。即使使用 ajax 验证，您也必须在服务器上重新验证所有内容

【参考方案2】：

标记 1 处的返回值是针对您的 ajax 请求的成功功能，而不是针对您的验证功能。因此，即使它返回它也只会从那里返回，而不是从标记 2 的验证函数返回

【讨论】：

所以我很好奇我可以返回整个$.ajax吗？我的意思是，return $.ajax(......); 从一开始就将mark-2 移动到else 块中？返回整个 Ajax Return？