Question

我正在建立一个列出所有商店的购物页面。我创建了一个包含所有类别的侧边栏和一个带分页的列表。此列表由我theme-functions.php中的wordpress函数生成，但是当我点击任何类别时，我会被重定向到另一个页面（从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);，您似乎只需将此结果显示回HTML容器中，方法是将当前内容替换为您的ajax响应。

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

1 个答案: