1

已经看了几个小时的 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 保持不变。

4

3 回答 3

0

您应该阅读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);
        });
    });
});
于 2012-08-07T16:52:51.207 回答
0

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

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 冲突。

于 2018-05-07T23:11:05.830 回答
-2

这应该是

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

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

于 2013-12-03T11:37:37.740 回答