将变量传递给wordpress函数并使用ajax刷新它

Question

我正在建立一个列出所有商店的购物页面。 我创建了一个包含所有类别的边栏和一个带有分页的列表。 由我的一个WordPress函数生成的列表theme-functions.php ，但是当我在任何类别的点击，我重定向到另一个页面（到http://<domain>/store来自http://<domain>/category ）。 因此，我创建了一个JavaScript函数来防止使用preventDefault的链接操作，并获取他的href值并将其设置为变量，以将其通过Ajax传递给该函数。

我的问题是：有一种方法可以传递此变量并刷新同一页面上的wordpress函数以显示此列表？

代码如下：

Wordpress theme-function.php

function storeSingle() {

    $catUrl = $_POST['catUrl'];

    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

    $args = array(
        'post_type'             =>  'lojas' ,
        'posts_per_page'        =>  5,
        'orderby'               =>  'title',
        'order'                 =>  'ASC',
        'paged'                 =>  $paged,
        'category_name' => $catUrl
);

    /* Added $paged variable */

    $exec = new WP_Query($args);

    if($exec->have_posts()):
        echo '<ul class="single-store">';
        while($exec->have_posts()):
            $exec->the_post();
            $categories = get_the_category($post->ID);
                echo "<li class='store-box'>";
                    echo '<a href=" '. get_the_permalink() .' ">';
                        echo '<h1>';
                            echo the_title();
                        echo '</h1>';
                    echo "</a>";

                    echo '<div class="store-info-box">';
                        echo '<span>';
                            echo '<i class="fa fa-map-marker" aria-hidden="true"></i>';
                            echo the_field('localizacao');
                        echo '</span>';
                        echo '<span>';
                            echo $categories[0]->name;
                        echo '</span>';
                    echo '</div>';

                echo "</li>";
        endwhile;
        echo '</ul>';
        if (function_exists(custom_pagination)) {
            custom_pagination($exec->max_num_pages,"",$paged);
        }
    endif;

}
add_action('wp_ajax_catUrl', 'catUrl');
add_action('wp_ajax_nopriv_catUrl', 'catUrl');

JavaScript功能

$('.cat-item').on('click', 'a', function(e){
     e.preventDefault();
     var catUrl = this.href;
     catUrl = catUrl.split('/');

     $.ajax({
         type: "POST",
         url: 'http://localhost/asv/shopping/wp-admin/admin-ajax.php',
         dataType: 'json',
         data: {
              action: catUrl,
              catUrl: catUrl[5]
         },
         success: function(data){
              response(data),
              console.log('test' + data);
         }
     });
});

我已经搜索了很多，但没有找到如何在wordpress中正确使用ajax的方法。

Answer 1

如果您在console.log('test' + data);中获得结果console.log('test' + data); 似乎您只需要通过用ajax响应替换当前内容，就可以在HTML容器中显示此结果。