Ajax 过滤搜索 - 更新变量/标准

Question

我正在按过滤器进行搜索，因为您可以通过应用一些过滤器在亚马逊上搜索文章。

案例一： 当我不更新变量时，它可以工作，但变量没有正确的值。

案例二： 当我更新变量时，它们只返回一次正确的数据。我不放更新变量时的图像。

部分图片：

当我在没有应用任何过滤器的情况下加载页面时

这是当我应用一个过滤器时，它返回了正确的数据，但变量没有更新。

下图显示了其他条件的变量如何未更新（最后 2 张图像）

解释我做了什么： 我有一个 Accession 实体，它的控制器，我在其中返回值，它的树枝，我在其中显示返回值，还有一个 ajax 文件，我在其中有逻辑要更新的部分。

加载页面时，我返回了所有的加入

     public function search(allRepositoryNeeded, Request request){
        // get the filters selected by the user
        $selectedCountries = $request->get("countries");
        $selectedBiologicalStatuses = $request->get("biologicalStatuses");
        $selectedMLSStatuses = $request->get('mlsStatuses');
        $selectedTaxonomies = $request->get('taxonomies');
        if ($request->get('ajax')) {
           // filters
           $accessionsByCountry = $countryRepo->getAccessionsByCountry($selectedBiologicalStatuses);
           $accessionsByBiologicalStatus = $biologicalStatusRepo->getAccessionsByBiologicalStatus();
           
           // I have a new context and I used the "content" key in the ajax response returned
           $context = [
                'title' => 'Accession Filtered List',
                'accessions' => $filteredAccession,
                'accessionsByCountry' => $accessionsByCountry,
                'accessionsByBiologicalStatus' => $accessionsByBiologicalStatus,
            ];
           return new JsonResponse([
                'content' => $this->renderView('search/content_accession.html.twig', $context)
            ]);
        }
        $accessions =  $accessionRepo->findAll();
        $context = [
            'title' => 'Accession List',
            'accessions' => $accessions,
            // filters
            'accessionsByCountry' => $accessionsByCountry,
            'accessionsByBiologicalStatus' => $accessionsByBiologicalStatus,

        ];
        return $this->render('search/index_accession.html.twig', $context);
    }

这里是ajax代码。

   $(document).ready(function(){
    // get the filters form
    const filtersForm = document.querySelector("#filters");

    // get the inputs of the form filters
    const inputs = document.querySelectorAll("#filters input");
    
    // add event listener on each input
    inputs.forEach(input => {
        input.addEventListener("change", function() {
            // get the data of the form
            const form = new FormData(filtersForm);
            // create url string params
            const params = new URLSearchParams();
            // loop over the for
            form.forEach((value, key) => {
                params.append(key, value);
            });
            // get the current url
            const currentUrl = new URL(window.location.href);
            // get the ajax query ready
            // using fetch that return a promise
            // add "ajax = 1" so that the same index function in the controller can be used
            fetch(currentUrl.pathname + "?" + params.toString() + "&ajax=1", {
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            }).then(response => response.json()
            ).then(data => {
                // get the div id filtered_content which is to be replaced by the response data
                const filteredContent = document.querySelector("#filtered_content");
                // content key coming from the controller
                filteredContent.innerHTML = data.content;
            }).catch(e => alert(e));
        });
    });
})

最后在树枝中，我有一个索引文件，在该文件中，我返回了所有数据，其中的表单 ID 为 filters 用于过滤器列表和我想替换为从 ajax 调用返回的数据的部分id 是 filtered_content

我如何在 twigg 中显示过滤器的示例

   <ul class="list-group collapse" id="countryCollapse">
      {% for oneObj in accessionsByCountry %}
         <li class="list-group-item d-flex justify-content-between align-items-center">
         <div>
             <input type="checkbox" name="countries[]" id="country{{ oneObj['country'].id }}" value="{{ oneObj['country'].id }}">
             <label for=country{{ oneObj['country'].id }}> {{ oneObj['country'].iso3 }} </label>
        </div>
        <span class="float-right badge badge-primary badge-pill">{{ oneObj['accQty'] }}</span>
        </li>
    {% endfor %}
  </ul>

  // the div whose content is to be replaced.
  <div id="filtered_content">
     {% include "search/content_accession.html.twig" %}
  </div>

我的一个想法是，不是查询函数，而是在每个新调用/应用的每个新过滤器上查询带有所选变量值的最后一个 URL。