Update meta values with AJAX

时间:2014-04-07 作者:Robbert

我正在Wordpress中开发投票系统。我第一次是用GET 但有人告诉我you should not use GET for this, 因此,我开始使用AJAX在阅读之后更新自定义字段/元数据this article. 我已经阅读了jQuery和Wordpress AJAX页面上的大量文档,这是我现在拥有的。

我想我已经走上了好的道路,但有些地方遗漏了/或者我做错了。

投票函数工作得很好,因为我之前用GET 请求。

我有一个简单的HTML测试表单:

<form id="vote_form" method="post">
    <input type="hidden" id="id" name="id" value="810">
    <input type="hidden" id="post_id" name="post_id" value="811">
    <input type="submit">
</form>
我的头中包含了这个jQuery文件。php和off-course包括jQuery库本身。

jQuery(document).ready(function() {

    jQuery( "#vote_form" ).submit( function( event ) {

        event.preventDefault();

        var id = jQuery("#vote_form #id").val();
        var post_id = jQuery("#vote_form #post_id").val();
        var vote = \'up\';

        jQuery.ajax({
            type: "POST",
            url: stn_vote.ajaxurl,
            data: { 
                id: id, 
                post_id: post_id,
                vote: vote, 
                action: \'stn_voting\' 
            },

        }); 

    });

});
我的投票函数连接到wp_ajax 行动

    // Ajax Voting
wp_register_script( \'ajax-vote\', get_template_directory_uri() . \'/js/ajax-vote.js\', array(\'jquery\') );

$nonce = wp_create_nonce("vote_nonce");
$stn_vote_data = array(
    \'ajaxurl\' => admin_url( \'admin-ajax.php\'),
    \'nonce\' => $nonce,
);
wp_localize_script( \'ajax-vote\', \'stn_vote\', $stn_vote_data );

function stn_script_enqueuer() {    
    wp_enqueue_script( \'jquery\' );
    wp_enqueue_script( \'ajax-vote\' );

}
add_action( \'wp_enqueue_scripts\', \'stn_script_enqueuer\' );

        // Vote Up
        if( isset( $_POST[\'id\'] ) ) {

            //simple Security check
            if ( ! wp_verify_nonce( $_POST[\'nonce\'], \'vote_nonce\' ) )
                die ( \'Busted!\');

            if( isset( $_POST[\'post_id\'] ) ) {
                $post_id =  $_POST[\'post_id\'];
            }

            if( $_POST[\'vote\'] == \'up\' ) {

                $vote_id = $_POST[\'id\'];
                $key = \'vote_up_\' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $value = $vote_up + 1;
                $update_vote_up = update_post_meta( $vote_id, \'vote_up_\' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, \'vote_count_\' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, \'vote_count_\' . $post_id, $value );

                // Update vote percent
                $vote_percent = ( ( $vote_up + 1) / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, \'vote_percent_\' . $post_id, $vote_percent );

            }

            // Vote Down
            else {          
                $vote_id = $_POST[\'id\'];
                $key = \'vote_down_\' . $post_id;
                $vote_down = get_post_meta( $vote_id, $key, true );
                $value = $vote_down + 1;
                $update_vote_down = update_post_meta( $vote_id, \'vote_down_\' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, \'vote_count_\' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, \'vote_count_\' . $post_id, $value );

                // Update vote percent
                $key = \'vote_up_\' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $vote_percent = ( $vote_up / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, \'vote_percent_\' . $post_id, $vote_percent );

            }
        }
        die();

    }
    add_action(\'wp_ajax_stn_voting\', \'ajax_stn_voting\');
    add_action(\'wp_ajax_nopriv_stn_voting\', \'ajax_stn_voting\');

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

两件事:

1: 在jquery之后包含脚本时,请使用wp_localize_script 功能:

$nonce = wp_create_nonce("vote_nonce");
$yourscript_info = array(
    \'ajaxurl\' => admin_url( \'admin-ajax.php\'),
    \'nonce\' => $nonce
);
wp_localize_script( \'yourscript\', \'yourscript\', $yourscript_info );

$.ajax({
    type: "POST",
    url: yourscript.ajaxurl,
    data: { id: id, vote: vote, nonce: yourscript.nonce, action: "stn_voting" },
2:使用添加一些安全检查nonce:

function ajax_stn_voting() {
    //simple Security check
    if ( ! wp_verify_nonce( $_POST[\'nonce\'], \'vote_nonce\' ) )
        die ( \'Busted!\');
3:您不需要在元键中包含post id。它已附加到帖子,因此它已存储在数据库中。

$key = \'vote_up\';
instead of
$key = \'vote_up_\' . $post->ID;
不仅仅是投票键,还有所有的$post->ID;函数内部不需要零件。如果所有键都不同,则无法根据这些值对帖子进行排序,这只是一件不必要的事情。

4: 使用ajax时,您需要在函数末尾“死”:

    die();
}
add_action(\'wp_ajax_stn_voting\', \'ajax_stn_voting\');
add_action(\'wp_ajax_nopriv_stn_voting\', \'ajax_stn_voting\');
否则,脚本对我来说很好。

以及通用汽车在上述评论中所说的:)

SO网友:Otto

您的自定义脚本使用$\'s,因此不考虑“noConflict”模式。

使用适当的无冲突包装器,或者简单地将“$”替换为随处可见的“jQuery”。

更多信息:http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

$快捷方式在所有上下文中都无效。您需要尽可能停止使用它,或者按照该链接中的描述,使用包装器专门定义它。

结束

相关推荐

如何在外部AJAX处理程序中使用GET_FIELD_NAME

当我单击自定义小部件中的单选按钮时,我正在从Ajax加载新的表单字段。在Ajax回调处理程序中,我需要使用get_field_name 和get\\u field\\u id小部件类方法。get\\u field\\u name方法返回WP_Widget 班所以我试着去了解那门课的瞬间。但我无法做到这一点。所以,请有人帮助我如何在外部类中使用它。 function wp_ajax_suport(){ add_action(\'wp_ajax_my_func\', \'my_f