如何将 URL 反射回查询生成器

Question

我正在使用 OData query builder js library 生成临时报告，并使用 OData 生成的 URL 为报告及其标题将它们保存到数据库。

以上方法完美运行 - 客户可以在那里选择表格、条件和过滤器来创建临时报告并将它们保存到数据库中。

问题

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

例如一个report url可以这么简单，

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

对于上面的例子，我可以在这个场景中使用 JS 获取第一个表名“Table1”并在查询生成器中选择它。

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

http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=replace(公司名称, ' ', '') eq 'AlfredsFutterkiste'

将其解析回 HTML 非常困难。

提问时间

如何将 URL 翻译回 HTML 以选择用户选择的表格、条件和过滤器他们添加的等等。（最好使用我在开始时提到的 JS 库）

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

这就是我要生成的内容，URL 上方的第一部分

Answer 1

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

但我的理解是这样的：

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

如果可能的话，最好的解决方案

如果 URL 或其他内容以某种方式包含数据，您可以解析那些可能是最好的字段形式。

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

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

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

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

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

例子：

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。如果您想了解有关该步骤的更多信息，请发表评论，我会添加它。

解析网址

我来自：How do I parse a URL query parameters, in Javascript?

我将其更改为将 url 作为参数

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();