我可以使用 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
                }

            }
        });
    })
});

我使用自定义简码和回调（）函数：

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 代表我过滤后的数据。这是根据教程的方法，但我不能使用响应数组（）......对我来说最好的方法是以某种方式将 $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）传递给模板，您可以查看the source code 了解更多信息。在“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
    }
});