带有参数化 URL 的 Javascript 高级搜索 [英] Javascript Advanced Search with Parametrized URL

问题描述

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

I have a javascript/springboot project that has a search page. On the page you can select multiple filter options then hit search. Here's a simplified demo of that page on fiddle. I want to be able to take all the inputted filter options and put them in the URL so users can easy bookmark their frequently used searches. I was thinking about following google's querying pattern like so:

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=.但是，鉴于我的查询需要在每种类型中具有不同的搜索类别(位置、类型、颜色)和多个过滤器选项，我不确定我将如何遵循这一点.

Where the URL follows the pattern search?q=<query string>. But I'm not sure how I would follow this given my query needs of having different search categories (Location, Type, Color) and multiple filter options within each type.

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

Is this the better url parameter pattern to follow or is there a better way? If it is the best pattern, how would I go about implementing this in javascript? Because I need to collect the search filters and post a request to a controller method to process the search.

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

Update 1: I would think the best way to implement this would be to have a URL like so:

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

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

And a controller to receive that request like so:

@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]
    **/
}

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

But I'm not sure that would actually work....

推荐答案

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

You can use multiple parameters in your query string with comma-separated values.

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 查看示例.然后，您可以单独检索每个参数并拆分逗号周围的值.

Here's a fiddle to see an example. You can then retrieve each parameter individually and split the values around the commas.

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

If your options could potentially contain commas, you should either escape them or use a different URL-safe character to delimit the values.

这篇关于带有参数化 URL 的 Javascript 高级搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！