Question

现在已经看了几个小时的WP ajax文档但仍然不能把这个想出来（解决;计算出;弄明白。我正在开发一个插件，这是为了更新它选项，而无需刷新页面。我成功完成了它通过wp-load，但知道这是不好的做法，并且想要正确地做。

一旦我掌握了所有内容，我就会将javascript移动到单独的.js文件中起来工作。

所有代码都在单页上。试图通过ajax更新一些选项它只是不起作用。回应是说它成功，但是 current_form选项未更新。任何帮助将不胜感激。

代码现已更新为：

wp_enqueue_script( 'AWNT_save_form_data', plugin_dir_url( __FILE__ ) . 'includes/save_form_data.js', array( 'jquery' ) );

wp_localize_script( 'AWNT_save_form_data', 'MyAjax', array(
    // URL to wp-admin/admin-ajax.php to process the request
    'ajaxurl'          => admin_url( 'admin-ajax.php' ),

    // generate a nonce with a unique ID "myajax-post-comment-nonce"
    // so that you can check it later when an AJAX request is sent
    'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ),
    )
);

add_action('wp_ajax_AWNT_save', 'AWNT_save_callback');

function AWNT_save_callback() {
update_option('current_form', '5');
$nonce = $_POST['postCommentNonce'];
if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
    die ( 'Busted!');
update_option('current_form', 'foo');
echo get_option('current_form');
die();
}

JS文件（save_form_data.js）：

 jQuery(document).ready(function($) {
$('#save').click(function() { 
        var data = {
            action: 'AWNT_save',
            postCommentNonce : MyAjax.postCommentNonce,
            form_name : $('#form_name').val(),
customC: $('#customC').is(":checked"),
no_throttle: $('#no_throttle').is(":checked"),
form_code : $('#form_code').val()};

        jQuery.post( MyAjax.ajaxurl, data, function(response) {
            alert('Response: ' + response);
        });
    });
});

正在添加脚本，请参阅响应为0的警报，但update_option未被调用或无法正常工作。 current_form保持不变。

Answer 1

您应该阅读http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

首先分隔javascript 文件并使用 wp_enqueue_script 添加它。然后使用 wp_localize_script 将nonce和ajaxurl传递给您的javascript文件。

在function.php中

wp_localize_script( 'your-js-file', 'MyAjax', array(
    // URL to wp-admin/admin-ajax.php to process the request
    'ajaxurl'          => admin_url( 'admin-ajax.php' ),

    // generate a nonce with a unique ID "myajax-post-comment-nonce"
    // so that you can check it later when an AJAX request is sent
    'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ),
    )
);


// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_AWNT_save', 'AWNT_save_callback' );
add_action('wp_ajax_nopriv_AWNT_save', 'AWNT_save_callback' );

function AWNT_save_callback() {

//CHeck  nonce FIRST HERE

$nonce = $_POST['postCommentNonce'];

// check to see if the submitted nonce matches with the
// generated nonce we created earlier
if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
    die ( 'Busted!')

update_option('current_form', 'foo');
echo get_option('current_form');

die();
}

在您的javascript文件中

 jQuery(document).ready(function($) {
$('#save').click(function() { 
        var data = {
            action: 'AWNT_save',
            postCommentNonce : MyAjax.postCommentNonce,
            form_name : $('#form_name').val(),
customC: $('#customC').is(":checked"),
no_throttle: $('#no_throttle').is(":checked"),
form_code : $('#form_code').val()};

        jQuery.post( MyAjax.ajaxurl, data, function(response) {
            alert('Response: ' + response);
        });
    });
});

Answer 2

我做了一个快速测试（原始测试），这是我的工作代码。

wp_enqueue_script( 'AWNT_save_form_data', get_stylesheet_directory_uri() . '/inc/save_form_data.js', array( 'jquery' ) );
wp_localize_script( 'AWNT_save_form_data', 'MyAjax', array(
    // URL to wp-admin/admin-ajax.php to process the request
    'ajaxurl'          => admin_url( 'admin-ajax.php' ),
    // generate a nonce with a unique ID "myajax-post-comment-nonce"
    // so that you can check it later when an AJAX request is sent
    'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ),
    )
);
add_action('wp_ajax_AWNT_save', 'AWNT_save_callback');
function AWNT_save_callback() {
    update_option('current_form', '5');
    $nonce = $_POST['postCommentNonce'];
    if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
        die ( 'Busted!');
    update_option('current_form', 'foo');
    echo get_option('current_form');
    die();
}
add_action( 'admin_menu', 'register_menu_pages', $priority = 10, $accepted_args = 1 );
function register_menu_pages() {
    add_menu_page('AWNT', 'awnt custom', 'manage_options', 'awntCustom', 'awnt_menu', 'dashicons-admin-site', 6 );
}
function awnt_menu () {
    ?>
    <form method="post">
        <input type="text" id="form_name" name="form_name">
        <input type="text" id="form_code" name="form_code">
        <input type="checkbox" id="customC" name="customC">
        <input type="checkbox" id="no_throttle" name="no_throttle">
        <input type="submit" name="save" value="Save" id="save">
    </form>
    <?php
}

Javascript代码是：

jQuery(document).ready(function($) {
    $('#save').on('click', function(e) {
        e.preventDefault(); 
        var data = {
            action: 'AWNT_save',
            postCommentNonce : MyAjax.postCommentNonce,
            form_name : $('#form_name').val(),
            customC: $('#customC').is(":checked"),
            no_throttle: $('#no_throttle').is(":checked"),
            form_code : $('#form_code').val()
        };
        jQuery.post( MyAjax.ajaxurl, data, function(response) {
            alert('Response: ' + response);
        });
    });
});

我认为除非你有任何其他的javascript冲突，否则同样适用于你。

Answer 3

这应该是

add_action( 'wp_ajax_AWNT_save_callback', 'AWNT_save_callback' );
add_action('wp_ajax_nopriv_AWNT_save_callback', 'AWNT_save_callback' );

我的意思是钩子名称错误。

WordPress WP_ajax无法正常工作

3 个答案: