使用 ajax 重新加载特定元素

Question

我在一个 wordpress 网站工作。我使用一个名为 my cred 的插件，因此任何用户都有积分余额。它显示在每一页上。问题是当用户花费积分时，余额不会改变，除非用户重新加载页面并且它很烦人。我决定使用 AJAX 每 2 秒重新加载一次元素（这甚至是最好的主意吗？）

我浏览了 stackoverflow，找到了如何使用 AJAX 重新加载 div 元素的答案，但我完全不明白。

<div id="balance" align="right"
     <strong><strong></strong>

        <?php if (  is_user_logged_in() ) {

        echo '<strong>Balance: </strong>'.do_shortcode( '[mycred_my_balance wrapper=0 title_el="" balance_el=""]', $ignore_html = false ).'♥'.'';

        echo '<a href="cumpara-sau-castiga"
>
</a>';}




?>

我想要的只是当用户花费积分而不对服务器造成压力时重新加载它的最佳方式。提前致谢。

Answer 1

//在你的functions.php中添加这段代码

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer() {
   wp_localize_script( 'reloadVars', 'custom_vars', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}

add_action("wp_ajax_reload_balance", "reload_balance");
add_action("wp_ajax_nopriv_reload_balance", "reload_balance");
function reload_balance() {
    $balance = "";
    if (  is_user_logged_in() ) {
        $balance .= '<strong>Balance: </strong>'.do_shortcode( '[mycred_my_balance wrapper=0 title_el="" balance_el=""]', $ignore_html = false ).'♥'.'';
        $balance .= '<a href="cumpara-sau-castiga"></a>';
    }
    echo $balance;
    wp_die();
}


//Add this code either on your js file or in footer.php
<script>
setInterval(function(){
 jQuery.ajax({
   type : "post",
   url : ajaxurl,
   data : {action: "reload_balance"},
   success: function(response) {
      jQuery("#balance").html(response);
   }
 });
}, 3000);