使用AJAX将随机数正确应用于表单

时间:2020-03-31 作者:DevSem

所以我仍在学习WordPress,似乎不知道如何将nonce正确地挂接到我创建的AJAX表单中。

在这里,我挂接并本地化js文件,并定义update_profile_validation 暂时的[WORKS]:

function enqueue_scripts()
{
    if (!is_admin()) {
        wp_register_script(\'profile_edit_submit\', content_url() . \'/mu-plugins/fleishmanhillard/scripts/frontend-profile-edit.js\', [\'jquery\'], \'\', true);
        wp_localize_script( \'profile_edit_submit\', \'profile_edit\', [
            // This will generate the admin URL that we can use on the front-end of our website
            \'ajax_url\' => admin_url(\'admin-ajax.php\'),
            // Pass in a custom nonce name for JS
            \'nonce\' => wp_create_nonce(\'update_profile_validation\'),
        ]);
        wp_enqueue_script(\'profile_edit_submit\');
    }
}
add_action(\'wp_enqueue_scripts\', \'enqueue_scripts\');
此方法用于更新用户内容[WORKS]:

function ajax_update_profile_post($args)
{
    check_ajax_referer(\'update_profile_validation\', \'my_nonce\');
    update_profile_post($args);
    wp_die();
}
add_action( \'wp_ajax_update_profile_post\', \'ajax_update_profile_post\' );

function update_profile_post($args  = [])
{
    if (!$args) {
        return;
    }

    // If the server request is POST, proceed to update post
    if (strtolower($_SERVER[\'REQUEST_METHOD\']) === "post") {
        wp_update_post($args);
    }
}
这是我提交的AJAX表单[WORKS]:

(function ($) {
    $(function($) {
        $(\'#profile_update\').on(\'submit\', function(e) {
            $.ajax({
                type: \'POST\',
                url : profile_edit.ajaxurl,
                data: $(\'#profile_update\').serialize() +
                    \'&my_nonce=\' + profile_edit.nonce +
                    \'&action=update_profile_post\'
            });
            return false;
        });
    });
})(jQuery);
这是我表格的最后一部分:

<?php if ($profile->get_edit_post_link()):

    // Set the post field content field
    $post_content = $_POST[\'content\'];

    ajax_update_profile_post([
        \'ID\' => $profile->get_id(),
        \'post_content\' => $post_content,
    ]);

    ?>
    <form action="" id="profile_update" method="POST">
        <input type="text" name="content" id="post_content">
        <button type="submit"><?= \'Update Post\' ?></button>
        <?php wp_nonce_field(\'update_profile_validation\', \'my_nonce\'); ?>
    </form>
<?php endif;
因此表单可以工作,字段可以提交,但我很难理解如何对表单应用适当的nonce。。我们将不胜感激!

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您只需将nonce与AJAX数据一起发送:

$.ajax({
    type: \'POST\',
    url : profile_edit.ajaxurl,
    data: $(\'#profile_update\').serialize() +
        \'&my_nonce=\' + profile_edit.nonce +
        \'&action=update_profile_post\', // don\'t forget the action name!
});
或者,因为您使用的是jQueryserialize() 函数,您可以直接将nonce添加到表单中:

<?php wp_nonce_field( \'update_profile_validation\', \'my_nonce\' ); ?>
既然你在做AJAX,那么check_ajax_referer() 要验证提交的nonce,请执行以下操作:

function update_profile_post() {
    check_ajax_referer( \'update_profile_validation\', \'my_nonce\' );
    // ... the rest of your code.
    wp_die();
}
查看WordPress开发人员网站here 了解更多详细信息。

此外,我将使用两个函数,而不是调用相同的函数update_profile_post() 来自表单和AJAX回调。这样做可以:

function ajax_update_profile_post() {
    check_ajax_referer( \'update_profile_validation\', \'my_nonce\' );

    // call update_profile_post() with submitted parameters
    // or call wp_update_post() directly

    wp_die();
}
add_action( \'wp_ajax_update_profile_post\', \'ajax_update_profile_post\' );

function update_profile_post( $args ) {
    // call wp_update_post( $args ) here
    // or just call wp_update_post() directly in your form
}
另外,REST API提供了一种更结构化、更可预测的与站点交互的方式,因此您应该考虑使用该API来处理AJAX操作。事实上,有一个现有的端点updating a post. :)

如果没有更新,请查看WordPress上的AJAX指南plugin handbook. 您将在那里获得更多我在回答中未包含的信息。:)

关于那件事// don\'t forget the action name!, 这只意味着你需要发送action name 以及AJAX数据,以便WordPress知道应该调用哪个函数ajax_update_profile_post() 或者update_profile_post() 如问题所述。如果你没有发送动作名称,那么你可能会得到著名的400 Bad Request 输出错误0 (这就是REST API更好的原因,因为它可以告诉您确切的错误)。

按动作名称,我指的是<action> 部件如中所示wp_ajax_<action>, 问题是update_profile_post.

我们是否缺少wp_ajax_no_priv 行动“&mdash;是,如果您允许未经身份验证的用户(或未登录的用户)使用表单。

相关推荐

bloginfo url in javascript

我正在试着设置<?php bloginfo(\'template_url\'); ?> 在Javascript上的变量中,然后设置src 的img 元素,但在html中它被打印为src=\"<?php bloginfo(\'template_url\'); ?>\" 事实上url.我就是这样做的:var wpTemplateUrl = \"<?php bloginfo(\'template_url\'); ?>\"; primaryImg.src = wpTem