Javascript Wordpress |如何实现window.history.pushState（）

我解释了我在我的网站中使用的问题，这是前端ajax中的一个表单，它工作得非常完美，为用户提供了最佳的用户体验，因此用户可以通过过滤器毫无问题地享受乐趣，找到他最需要的产品

这是完美的，问题是它在导航过程中会产生错误

错误：

假设一个用户在芝加哥搜索一个产品，按升序或降序使用价格过滤器，找到一个产品，进入产品页面，查阅它，然后返回到搜索页面，就像魔术一样，poof，搜索表单是空的，因为ajax为用户提供了完美的用户体验，但不保留内存、过滤器或值​​以前在表单中搜索过，所以为了解决这个问题，我想在规范ajax表单的脚本中集成：

window.history.pushState（）

因此，每当用户搜索某个内容或只是应用一个过滤器时，url都会发生变化，如果用户访问产品页面并返回搜索结果，那么url值也会随之变化​​通过url的

$\u GET

，他们将向他展示他以前一直在寻找的内容

ajax表单的结构

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
  
<input style="padding-top: 25px;margin-right: 15px;"  type="search" id="research-autocomplete" value="" name="categoryfilter" aria-describedby="button-addon4" class="form-control bg- border-0">

   <select class="browser-default custom-select" name="order"><option value="">
      <option value="ASC">Prezzo Crescente</option>
      <option value="DESC">Prezzo Decrescente</option>
     
    </select>
                                
<input type="checkbox" name="firts" class="custom-control-input" id="defaultUnchecked">
<button>Apply filter</button>
<input type="hidden" name="action" value="myfilter">
</form>

脚本：

<script>
    jQuery(function($){
        $('#filter').submit(function(){
            var filter = $('#filter');
            $.ajax({
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr){
                    filter.find('button').text('Processing...'); // changing the button label
                },
                success:function(data){
                    filter.find('button').text('Apply filter'); // changing the button label back
                    $('#response').html(data); // insert data
                }
            });
            return false;
        });
    });
</script>

jQuery（函数（$）{
$（“#过滤器”）.submit（函数（）{
变量过滤器=$（“#过滤器”）；
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），//表单数据
类型：filter.attr（'method'），//POST
发送前：函数（xhr）{
filter.find（'button'）.text（'Processing…'）；//更改按钮标签
},
成功：功能（数据）{
filter.find（'button'）.text（'Apply filter'）；//重新更改按钮标签
$（'#response'）.html（数据）；//插入数据
}
});
返回false；
});
});

---

在javascript方面没有太多的知识，我如何在我的脚本中实现：

window.history.pushState（）

来解决这个问题？

将这个

window.history.pushState（{filter}，

选中：${filter}

，

${page='+filter}

）

@Mantykora7如果我复制并粘贴了你的代码，它就不起作用了，我是不是在你的代码配置上做错了什么？你在控制台里有什么，你在POST里发送什么？@Mantykora7什么都没有，因为如果我复制并粘贴：window.history.pushState（{filter}，选中：${filter}，${page='+filter}）或window.history.pushState（{filter}，${filter}，${page='+filter}），这段代码破坏了我的表单，控制台没有显示任何原因重定向到：wp admin/admin-ajax.php

filter

变量是一个jQuery对象。该方法需要一个状态对象，然后是两个字符串。因此，当然，试图提供一个字符串所期望的对象会使应用程序崩溃。

add_action('wp_ajax_myfilter', 'ajax_filter_function'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_myfilter', 'ajax_filter_function');

function ajax_filter_function(){
        $args =  array(
            'post_type' => 'pro',
            'posts_per_page' => -1,
            'meta_key'    => $_POST['categoryfilter'],
            'orderby'    => 'meta_value_num',
            'order'       => $_POST['order'],
        );
    $query = new WP_Query( $args );

    if( $query->have_posts() ) :

        while( $query->have_posts() ): $query->the_post();
          /*SOME DATA SHOW PRODUCT*/
        endwhile;
        wp_reset_postdata();
    endif;

}

<script>
    jQuery(function($){
        $('#filter').submit(function(){
            var filter = $('#filter');
            $.ajax({
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr){
                    filter.find('button').text('Processing...'); // changing the button label
                },
                success:function(data){
                    filter.find('button').text('Apply filter'); // changing the button label back
                    $('#response').html(data); // insert data
                }
            });
            return false;
        });
    });
</script>