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

网址遵循模式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

OR

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

使用参数化URL进行Javascript高级搜索

1 个答案: