在Post Metabox中提交AJAX表单

时间:2016-03-18 作者:samjco

我有一个自定义wordpress元数据库分配给post。

我在post save\\u操作上运行了该函数。

然而,我想知道我是否可以在metabox中找到一个按钮,它将在单击时运行该功能,而不刷新页面?

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

是的,你可以。下面是一个示例代码,可以帮助您入门,并提供一些后续链接。

在表单中添加按钮和nonce字段

<input type="hidden" name="my_ajax_nonce" value="<?php echo wp_create_nonce(\'my_ajax_action\');?>" />
<button id="submit-my-form" type="submit"><?php _e(\'Save custom meta data\')?></button>
您需要创建并注册要使用AJAX调用执行的函数:

function my_ajax_action() {
    if(!wp_verify_nonce( $_POST[\'my_ajax_nonce\'], \'my_ajax_action\' )) {
        die(-1);
    }
    //TODO: Add your button saving stuff here.
    var_dump($_POST[\'form_data\']);
    exit;
}

function my_ajax_action_init() {
    if ($_POST[\'action\'] == \'my_ajax_action\') {
        do_action(\'wp_ajax_my_ajax_action\');
    }
}

if (is_admin()){
    add_action(\'wp_ajax_my_ajax_action\', \'my_ajax_action\');
}

add_action( \'init\', \'my_ajax_action_init\');
NOTE 为什么要在init上调用AJAX操作,而不是在加载插件时调用?因为我们需要在使用AJAX之前正确设置WordPress。

现在在一个名为my.ajax.action.js

jQuery(document).ready(function($) {
    $(\'body\').on(\'click\', \'#submit-my-form\', function(e) {
        e.preventDefault();
        var $me = $(this),
            action = \'my_ajax_action\';
        var data = $.extend(true, $me.data(), {
            action: action,
            form_data: $(\'#post\').serializeArray()
        });
        $.post(ajaxurl, data, function(response) {
            if(response == \'0\' || response == \'-1\'){
                //TODO: Add Error handling (Wrong nonce, no permissions, …) here.
            } else {
                //TODO: Do stuff with your response (manipulate DOM, alert user, …)
            }
        });
    });
});
别忘了将脚本排队。

function my_enqueue_scripts() {
    wp_enqueue_script( \'my-ajax-action\', plugins_url(\'my.ajax.action.js\', __FILE__), array(\'jquery\'), NULL, true);
}
add_action( \'admin_enqueue_scripts\', \'my_enqueue_scripts\');
NOTE 全局JS var adminurl自动包含在WP后端中。

进一步阅读AJAX in Plugins
  • Noncesadmin_enqueue_scriptsinit