我可以使用Ajax将过滤后的数据发送回PHP文件并在页面上再次写它们吗？

Question

我实现了自定义帖子类型，并且内容以这种方式在while循环中的页面上列出：

 $args = array('post_type' => 'studien', 'order' => 'ASC', 'posts_per_page' => 4 );

        $loop = new WP_Query($args);

        if($loop->have_posts()):
        while($loop->have_posts()) : $loop->the_post();?>

        <div class="col-md-6">
         // data are listed here
        </div>
          <?php endwhile;
        endif;
        ?>

在提交时，我尝试根据一些自定义分类法过滤数据：

$ = jQuery;

var search = $("#search-studien");

var searchForm = search.find("studien");

$(document).ready(function () {

    $('#studien').submit(function (evt) {
        event.preventDefault();

        var data = {
            action: "studien_search",
            type: $("#taxonomy-market-type").val(),
        };


        var html;

        $.ajax({
            url: ajaxurl,
            data: data,
            success: function (response) {

                if(response)
                {
                    // probably here I need to send filtered data back to PHP file and write them again
                }

            }
        });
    })
});

我使用自定义的shortcode和callback（）函数：

function search_callback()
{
    header('Content-Type: application/json;charset=utf-8');

        $type = "";


        $type = $_GET['type'];


    $args = array(
            "post_type" => "studien",
            "post_per_page" => -1,
            "relation" => "AND"
    );


    if($type != "") {
        $args['tax_query'][] = array(

            'taxonomy' => 'market',
            'field' => 'slug',
            'terms' => $type
        );

       $search_query = new WP_Query($args);

       // echo json_encode($search_query);
    }


    else{
        $search_query = new WP_Query( $args );
    }

    if ( $search_query->have_posts() ) {

        $result = array();

        while ($search_query->have_posts()) {

            $search_query->the_post();

            $result[] = array(
                "id" => get_the_ID(),
                "title" => get_the_title(),
                "permalink" => get_permalink(),


            );
        };


        wp_reset_query();

        echo json_encode($search_query);
    }

    else {
        // nothing
    }



    wp_die(); global $argsAjaxFilter;

    $argsAjaxFilter = $search_query;


}

如您所见，$ search_query代表我过滤的数据。 这是根据教程的方法，但是我不能使用响应array（）...，对我来说，最好的方法是以某种方式将$ search_query发送到PHP文件，在此我可以再次写入新的自定义帖子类型数据。 拜托，有人对我有建议？ 那是个好建议吗？

Answer 1

因此，主要问题是能够将呈现的html发送到浏览器。 为此，我们将需要一个模板，以便我们可以在各个地方重复使用它。

// your-theme/studien.php
<div class="studien-wrapper">
<?php
  if($wp_query->have_posts()):
    while($wp_query->have_posts()) : $wp_query->the_post();
      // Do the thing
    endwhile;
  endif;
?>
</div>

接下来，我们需要在需要时加载它。 我们可以使用get_template_part做到这一点。 此函数将自动将一些全局变量（例如$wp_query ）传递给模板，您可以查看源代码以了解更多信息。 在“ ajax模式”下使用它时，我们需要捕获输出，而不是将其发送到浏览器（尽管可以），因此我们使用输出缓冲。 对于“普通页面”，只需省略这些调用即可。

// Set up query args
global $wp_query = new WP_Query($args);
ob_start();  // Capture the output.
get_template_part('studien');
$html_result = ob_get_clean(); 

现在是组成响应的问题：

$result['html'] = $html_result;
if (!is_array($type)) {
  $type = array($type);
}
$result['query_terms'] = $type;

$json = wp_json_encode($result);
echo $json;

wp_die();

您也可以在客户端跟踪搜索词，避免最后一部分。 取决于您的需求。

要更新页面，您可以在ajax调用中执行以下操作：

$.ajax({
    url: ajaxurl,
    data: data,
    success: function (response) {
        $('.studien-wrapper').replaceWith(response.html);
        // Update search terms, etc
    }
});