如何合并2个get请求？

Question

我正在制作一个应用程序，标题中是一个搜索栏，您可以在其中写入一些内容，然后进行搜索并给出结果。 现在，在结果页面上，我有另一个表单，您可以在其中按类型（玩家或团队）进行过滤。问题是，如果我搜索然后应用过滤器，搜索查询中的关键字就会消失...如何在搜索栏中显示该关键字，并在使用过滤器重新加载页面时保存以供使用？

这是在搜索栏的标题中

 <form class="d-none d-lg-flex" role="search" th:action="@{/search}" method="get">
                    <label for="keyword"></label>
                    <input class="form-control me-2" name="keyword" id="keyword" type="text"
                           placeholder="search team or player">
                    <input type="submit" value="search" class="btn">
                </form>

这是搜索页面的表格

  <form th:action="@{/search}" method="get">
            <p>Filters</p>
            <div>
                <h3>Type</h3>
                <label for="all">all</label>
                <input type="radio" id="all" name="type" value="all"/>
                <label for="team">team</label>
                <input type="radio" id="team" name="type" value="team"/>
                <label for="player">player</label>
                <input type="radio" id="player" name="type" value="player"/>
            </div>
            <div>
                <input class="btn" type="submit" value="search">
            </div>
        </form>

这是搜索控制器

    @GetMapping("/search")
    public String search(Model model,
                         @RequestParam(required = false) String keyword,
                         @RequestParam(required = false) String type) {


        List<Team> teams = new ArrayList<>();
        List<Player> players = new ArrayList<>();
        teams = teamRepository.findAllByKeyword(keyword);
        players = playerRepository.findAllByKeyword(keyword);

        if (type == null || type.isEmpty() || type.equals("all")) {
            model.addAttribute("teams", teams);
            model.addAttribute("players", players);
            model.addAttribute("totalPlayers", players.size());
            model.addAttribute("totalTeams", teams.size());
        } else if (type.equals("team")) {
            model.addAttribute("teams", teams);
            model.addAttribute("totalTeams", teams.size());
        } else if (type.equals("player")) {
            model.addAttribute("players", players);
            model.addAttribute("totalPlayers", players.size());
        }

        logoService.addLogos(model);

        return "search";
    }

所以问题是，如果我第一次搜索，所有结果都会显示，但是当应用过滤器时，不会显示任何内容，可能是因为关键字不再存在。

Answer 1

您可以有一个用于搜索字段和过滤器的表单（甚至在表单标签之外）：

<!-- Add ID to your form -->
<form id="myform" class="d-none d-lg-flex" role="search" th:action="@{/search}" method="get">
    <label for="keyword"></label>
    <input class="form-control me-2" name="keyword" id="keyword" type="text" placeholder="search team or player" th:value="${previousKeywordValue == 'player'}">
    <input type="submit" value="search" class="btn">
</form>

...

<!-- Connect your inputs OUTSIDE of the form-tag to your form =) -->
<p>Filters</p>
<div>
  <h3>Type</h3>
  <label for="all">all</label>
  <input type="radio" id="all" name="type" value="all" form="myform" th:checked="${previousTypeValue == 'all'}"/>
  
  <label for="team">team</label>
  <input type="radio" id="team" name="type" value="team" form="myform" th:checked="${previousTypeValue == 'team'}"/>
  
  <label for="player">player</label>
  <input type="radio" id="player" name="type" value="player" form="myform" th:checked="${previousTypeValue == 'player'}"/>
</div>
<div>
  <input class="btn" type="submit" value="search" form="myform">
</div>

在这种情况下，您可以从两个提交按钮之一调用提交，但无论如何，您都将发送带有关键字和过滤器值的所有表单。

控制器处理后，您可以将先前的关键字和过滤器属性添加到模型中并将它们安装到字段中：

@GetMapping("/search")
public String search(Model model,
                     @RequestParam(required = false) String keyword,
                     @RequestParam(required = false) String type) {
    ...
     model.addAttribute("previousKeywordValue", keyword);
     model.addAttribute("previousTypeValue", type);
    ...

    return "search";
}

在任何表单确认之间，您将保存之前的关键字和过滤器值。