带有参数化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中实现它？因为我需要收集搜索过滤器，并向控制器方法发布请求来处理搜索。

更新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");
})

下面是一个例子。然后，您可以单独检索每个参数，并在逗号周围拆分值。

如果您的选项可能包含逗号，则应该对其进行转义或使用其他URL安全字符来分隔值。