带有参数化 URL 的 Javascript 高级搜索

Question

我有一个带有搜索页面的 javascript/springboot 项目。在页面上，您可以选择多个过滤选项，然后点击搜索。这是 fiddle 上该页面的简化演示。我希望能够获取所有输入的过滤器选项并将它们放入 URL 中，以便用户可以轻松地为他们经常使用的搜索添加书签。我正在考虑遵循谷歌的查询模式，如下所示:

https://www.google.com/search?q=this+is+a+test+search&oq=this+is+a+test+search&aqs=chrome..69i57j0.2487j0j9&sourceid=chrome&ie=UTF-8

URL 遵循模式 search?q=<query string> 。但考虑到我的查询需要具有不同的搜索类别(位置、类型、颜色)以及每种类型中的多个过滤器选项，我不确定如何遵循这一点。

这是更好的 url 参数模式还是有更好的方法？如果这是最好的模式，我将如何在 javascript 中实现它？因为我需要收集搜索过滤器并向 Controller 方法发送请求来处理搜索。

更新 1:我认为实现这一点的最佳方法是有一个像这样的 URL:

https://www.mywebsite.com/search?location=Alabama&location=Wyoming&type=SUV&color=White&color=Black&color=Green

或者

https://www.mywebsite.com/search?location=Alabama,Wyoming&type=SUV&color=White,Black,Green

还有一个 Controller 来接收该请求，如下所示:

@RequestMapping(value = {"/search/"}, method = RequestMethod.GET)
public String search(@RequestParam Map<String,String> searchFilters){
    /**
    * searchFilters["location"] = [Alabama, Wyoming]
    * searchFilters["type"] = [SUV]
    * searchFilters["color"] = [White, Black, Green]
    **/
}

但我不确定这是否真的有效......

Answer 1

您可以在查询字符串中使用多个带有逗号分隔值的参数。

function getValues(id) {
    return $("#" + id).val().join(",");
}

$("button").click(function() {
    location.href = "search" +
        "?loc=" + getValues("e1") +
        "&type=" + getValues("e2") +
        "&col=" + getValues("e3");
})

Here's a fiddle看一个例子。然后，您可以单独检索每个参数并用逗号分隔值。

如果您的选项可能包含逗号，您应该转义它们或使用不同的 URL 安全字符来分隔值。