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

时间:2018-09-22 22:11:59

标签: javascript php ajax wordpress

我实现了“自定义帖子类型”,并且内容以这种方式在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
                }

            }
        });
    })
});

我使用自定义的简码和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文件,在此我可以再次写入新的自定义帖子类型数据。拜托,有人对我有建议?那是个好建议吗?

1 个答案:

答案 0 :(得分:0)

因此,主要问题是能够将呈现的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
    }
});