如何将URL反映回查询构建器

Question

我正在使用OData query builder js library生成即席报告，并使用 OData生成的网址 将报告及其标题保存到数据库中。

以上工作完美 - 客户可以选择表格，条件和过滤器来创建特别报告并将其保存到数据库。

问题

当我的客户回来查看他们创建的报告时，我可以使用报告的网址查询JSON数据，但我不确定如何 选择或添加 他们为特定报告选择的表格，条件和过滤器。

E.g。报告网址可以这么简单，

1 -  www.example.com/Table1&$format=json  // this will return a simple table

对于上面的例子，我可以使用JS获取第一个表名＆＃34; Table1＆＃34;在此方案中，在查询构建器中选择它。

但对于复杂的网址......就像这样，

  

http://services.odata.org/Northwind/Northwind.svc/Customers？$滤波器=取代（公司名称，   ＆＃39; ＆＃39;，＆＃39;＆＃39;）eq＆＃39; AlfredsFutterkiste＆＃39;

将其解析回HTML非常困难。

提问时间

如何将网址转换回HTML以选择所选用户， 条件＆amp;过滤器 他们添加了等等。（最好使用我在开始时提到的JS库）

一个肮脏的解决方法是将HTML与URL一起保存，然后在用户想要编辑自定义报告时将其显示回来，但这听起来太脏了。

这就是我想要生成的内容， 第一部分以上网址

Answer 1

正如我所说，我不知道你的图书馆。

但这就是我的理解：

用户在页面GUI中输入多个选项，然后使用库生成报告。该库返回该报告的URL。如果用户返回页面，您希望他们能够插入URL，GUI将返回到生成报告时所处的状态（所有选定的项目和内容都是原样）。

最佳解决方案，如果可能

如果URL或其他内容有数据，您可以解析那些可能最好的字段。

另一种解决方案，如果你有一个后端

您可以在数据库中存储带有“url”的表格，以及每个字段的列。当他们生成报告时，它向后端发出请求，然后向表中插入一行，其中包含生成的URL和输入的值。

当他们返回页面并输入URL时，只需向后端发出请求，返回与该url匹配的行。 （例如，从generated_reports中选择*，其中url ='queryUrl'）

如果您的应用只是前端应用（无后端）

您可以将其存储在浏览器localstorage中：

示例：

var assigned_fields = {
    tables_selected: ["user", "cats", "dogs"]
}
var report_url = "http://not-really.com"
window.localStorage.setItem("report_"+report_url, JSON.stringify(assigned_fields))

function getAssignedFieldsFromURL(url) {
    return JSON.parse(window.localStorage.getItem("report_"+url))
}

请注意，如果您在控制台中运行此javascript，则可以使用：

getAssignedFieldsFromURL("http://not-really.com")

即使页面刷新后也会返回该对象。

如果使用其他浏览器或其他计算机，此解决方案将无效。

您可以使用您选择的库或本机javascript来填充指定的字段对象，并从对象填充GUI。如果您想了解有关该步骤的更多信息，请发表评论，我将添加它。

解析URL

我从How do I parse a URL query parameters, in Javascript?

得到了这个

我将其更改为将网址作为参数

function getJsonFromUrl(str) {
    var query

    var pos = str.indexOf("?")

    if (pos !== -1)
        query = str.substr(pos+1)

    else
        query = str

    var result = {}
    query.split("&").forEach(function(part) {

        if (!part)
            return
        part = part.split("+").join(" ") // replace every + with space, regexp-free version

        var eq = part.indexOf("=")
        var key = eq>-1 ? part.substr(0,eq) : part
        var val = eq>-1 ? decodeURIComponent(part.substr(eq+1)) : ""

        var from = key.indexOf("[")

        if (from == -1)
            result[decodeURIComponent(key)] = val
        else {
            var to = key.indexOf("]")
            var index = decodeURIComponent(key.substring(from+1,to))
            key = decodeURIComponent(key.substring(0,from))
            if(!result[key]) result[key] = []
            if(!index) result[key].push(val)
            else result[key][index] = val
        }
    })
    return result
}

示例用法：

getJsonFromUrl("http://google.com?test=5&cat=3")

返回：对象{test：“5”，cat：“3”}

有了这个，你可以从查询参数中获得你想要的信息

注意： 您可能希望确保正确解析。我注意到它将所有“+”转换为“”以及其他一些东西。

Answer 2

很抱歉这个答案，但你需要将数据传递到url，只在URL中，尝试查看你的lib是否可以从发布的数据中检索信息。

这是一个示例，创建表单来分页和发布数据，这样您就可以发送许多类型的数据和所需的所有过滤器。

var form = document.createElement("form");
var element1 = document.createElement("input");

form.method = "POST";
form.action = "Yourpage";             element1.value=document.getElementById("You input valueid").value;
element1.name="Your field in posted form";
form.appendChild(element1);  
document.body.appendChild(form);

form.submit();