Javascript 参数化高级搜索 URL

Question

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

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 中实现它？因为我需要收集搜索过滤器和 post 对控制器方法的请求来处理搜索。

更新 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

还有一个控制器来接收这样的请求：

@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 安全字符来分隔值。

Javascript 参数化高级搜索 URL

Javascript Advanced Search with Parametrized URL

javascript

url

url-parameters