Php jQuery如何管理HTML表单动作属性执行

我需要在执行action属性之前验证HTML表单。但这让我很难过。 有关此问题的解释，请参见else语句中的注释以及返回false后的注释

$(document).ready(function(){
    $("#ajax-payment-form").submit(function() {
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: templateDir+"/payment_form/payment_process.php",
            data: str,
            success: function(msg) {
                // Message Sent - Show the 'Thank You' message and hide the form
                if(msg == 'OK') {
                    alert("success");
                } else {
                    event.preventDefault(); // I have tried with or without this method
                    alert("fail");
                }
            }
        });
        return false; // when return false, the action will not execute. If false is removed the action will execute, even if event.precentDefault(); is called in the else statement.**
    });                                                         
});

谢谢你抽出时间

---

Troles

您的ajax调用是异步的。这意味着该函数将被执行，它不会等待函数的响应才继续执行。这意味着返回false；将始终在ajax函数的结果返回给您之前触发。考虑到您当前的情况，最简单的方法是在success函数中调用this.submit，但始终返回false；在默认场景下。这将避免递归，异步调用也不再有问题

$(document).ready(function(){
    $("#ajax-payment-form").submit(function() {
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: templateDir+"/payment_form/payment_process.php",
            data: str,
            context: this, //needed to tell the ajax function that "this" belongs to the form, not the ajax call.
            success: function(msg) {
                // Message Sent - Show the 'Thank You' message and hide the form
                if(msg == 'OK') {
                    alert("success");
                    this.submit(); //it's magic, john.
                } else {
                    //no reason to prevent the default, as the form will automatically return false anyway.
                    alert("fail");
                }
            }
        });
        return false; //just leave this right here.
    });                                                         
});

问题有两个方面：事件没有在函数调用中声明，并且您没有在函数成功时提交表单。提交事件的逻辑应如下所示：

侦听元素上的提交事件。 首先使用e.preventDefault阻止默认表单操作 打AJAX电话。根据返回数据的结果，确定是否继续提交表单。我强烈建议不要使用不推荐使用的jqXHR.success函数，而是使用延迟函数jqXHR.done或jqXHR.fail。 此外，您可以始终使用console.log检查脚本，而不是依赖于阻止下游代码执行的警报。代码如下：

$(function(){
    $("#ajax-payment-form input[type='submit']").click(function(e) {

        // Prevent form submission
        e.preventDefault();

        // Serialize data, make AJAX call
        var str = $(this).closest('form').serialize();
        $.ajax({
            type: "POST",
            url: templateDir+"/payment_form/payment_process.php",
            data: str,
            context: this    // So that you can use $(this) later
        }).done(function(msg) {
            // If a response is received from your server
            if(msg == 'OK') {
                 console.log('Validation passed, will submit form');
                 $(this).closest('form').submit();
            } else {
                 console.log('Validation failed, will not do anything more');
            }
        }).fail(function() {
            // Catch ajax errors here
            console.log('AJAX error');
        });
    });                                                         
});

---

如果要在提交前进行验证，请在提交时使用.preventDefault，然后在执行验证并通过验证后使用.submit手动提交表单。能否使用我发布的代码演示一个示例？感谢您的回复，很遗憾，这并不能解决此问题。else语句执行得很好，但if条件不是？似乎是这样的。提交不执行操作属性。有什么想法吗？这个。提交；应该在对象上调用底层DOM处理程序，因此如果action属性不正确，并且需要像在ajax调用中那样向其添加templateDir，则需要在success函数中修改该属性，然后调用submit。此外，这可能是一个范围问题。尝试定义var=this；在var str=$this.serialize；之后；，然后使用它。提交；在ifmsg中==“确定”{。最后，检查您的web检查器，按F12键并转到“网络”选项卡。这将告诉您有关您的请求的所有信息。这并不是在$.ajax函数中引用正确的对象。您应该使用context:This声明$.ajax调用的上下文。请参阅：@Terry Yep！尽管我不建议使用context，这可能是一个更好的解决方案我只是建议OP创建一个引用。我会更新。不幸的是，上下文：这无助于解决问题。似乎return-false语句阻止了这个。submit；工作？谢谢terry。似乎正在执行一个无限循环。控制台上显示1023Validation-passed，将提交表单。中的数字计数很快。@thar My bad。这是因为触发表单提交会导致递归函数调用，因为我们也在侦听表单提交事件。我建议侦听提交按钮的单击事件（无论是元素还是按钮），然后决定是否继续表单提交。更新了答：谢谢，没有循环了，这么长时间都很好。但是现在它返回验证失败，在表单正常时也不会再做任何事情了。js？ver=4.0:77？检查服务器对消息的响应。你看到了什么？控制台中只有一条空消息和对theme.js？ver=4.0:77的引用？但是在尝试记录字符串之后对于msg，我可以看到正在执行的是else语句。