3

我想在点击提交按钮时验证 WordPress 帖子上的用户条目，显示错误消息是否存在问题，如果一切正常，则提交表单。我有一个 PHP 函数进行检查，true如果数据form_data正常则返回，否则返回一些错误代码。以下 JavaScript 发出 AJAX 请求，并且应该在成功检查后继续提交表单，但它没有：

        jQuery(document).ready(function() {
            jQuery('#post').submit(function() {

                var form_data = jQuery('#post').serializeArray();
                var data = {
                    action: 'ep_pre_submit_validation',
                    security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
                    form_data: jQuery.param(form_data),
                };
                var proceed = false;
                jQuery.post(ajaxurl, data, function(response) {
                    if (response.indexOf('true') > -1 || response == true) {
                        proceed = true;
                    } else {
                        alert("Error: " + response);
                        proceed = false;
                    }
                });
                jQuery('#ajax-loading').hide();
                jQuery('#publish').removeClass('button-primary-disabled');
                return proceed; //breakpoint here makes the code run
            });
        });

该代码改编自WPSE question，该问题最初对我不起作用，因为未提交表单。我发现如果绑定到的jQuery函数.submit()返回true，则应该提交表单，所以这就是我试图实现的。使用上面的代码，一开始它似乎不起作用（没有错误时不会提交表单），但在使用 Firebug 仔细检查后，如果在该行proceed插入断点，似乎会得到正确的结果。只有当我在到达断点时稍等片刻，然后继续执行时，它才能return proceed按预期使用有效数据。如果有错误，则发出警报没有问题。

处理这个问题的最佳方法是什么？

编辑

根据下面的@Linus 回答，以下代码适用于有效和无效数据：

        jQuery(document).ready(function() {
            jQuery('#post').submit(function() {
                if(jQuery(this).data("valid")) {
                    return true;
                }

                var form_data = jQuery('#post').serializeArray();
                var data = {
                    action: 'ep_pre_submit_validation',
                    security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
                    form_data: jQuery.param(form_data),
                };
                jQuery.post(ajaxurl, data, function(response) {
                    if (response.indexOf('true') > -1 || response == true) {
                        jQuery("#post").data("valid", true).submit();
                    } else {
                        alert("Error: " + response);
                        jQuery("#post").data("valid", false);

                    }
                    //hide loading icon, return Publish button to normal
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                });
                return false;
            });
        });
4

4 回答 4

6

将您的按钮绑定到验证函数而不是提交。如果它通过验证，则调用 submit()。

于 2012-02-17T15:35:50.673 回答
6

简短的回答：你不能——不能以这种方式。

一些背景知识：作为参数提供给函数的回调，例如$.post异步执行。这意味着你会return proceed 在你的成功回调被执行之前，并且proceed永远是false. 使用你的断点，如果你等到成功回调执行完毕，一切proceed都会true好起来的。

因此，如果您想在 ajax 请求完成后提交表单，则必须使用 javascript 提交。使用 jQuery 这很容易，只需$.post使用data: $("yourForm").serialize()和做一个 jQuery 即可url: yourForm.action。

这基本上是您已经在做的事情，您只需重复调用您实际想要发布数据的 URL。

编辑：

另一种方法是在您的表单上设置一个属性，例如valid，并在您的submit处理程序中检查：

jQuery("#post").submit(function() {
    if($(this).data("valid")) {
        return true;
    }
    // Rest of your code
});

在验证 ajax 请求的成功回调中，您将设置/清除该属性，然后提交：

$("#post").data("valid", true).submit();

编辑：

$.post出于与上述相同的原因，您还希望在回调中启用“ajax-loading”/按钮- 事实上，它们将在您的 ajax 调用返回之前立即发生。

于 2012-02-17T15:41:55.147 回答
2

Wordpress 有自己的机制来处理 Ajax 请求，使用 wp-admin/wp-ajax.php。这允许您在 Ajax 边界的任一侧运行任意代码，而无需编写来回状态检查代码等。设置你的回调然后去....

于 2012-10-23T23:27:36.123 回答
1

真正的问题是 - 你为什么要在服务器端进行验证？为什么你不能在之前加载验证标准 - 因为正在写帖子？然后您的验证可以实时进行，而不是在提交时进行。

jquery.post 是异步执行的，这意味着 JS 在收到回复之前会继续执行。你被 Diodeus 的答案困住了——将按钮绑定到验证，然后提交表单（这使得它不能很好地降级），或者将你的 $.post 更改为 ajax 并关闭异步，这将迫使它在继续之前等待响应...可能会锁定页面上的 JS 直到超时。

$.ajax({
    type: 'POST',
    url: ajaxurl,
    async:false,
    data: data,
    timeout:3000,
    success: function(){

    }
});
于 2012-02-17T15:46:18.060 回答