有没有办法使用 javascript/Jquery 将未提交的输入字段的值属性作为 URL 的参数传递？

Question

我正在尝试检索一个未提交的输入字段的值属性作为 URL 那个 opens/saves 一个 excel 文件的参数。参数应该用于过滤 excel 文件。

我尝试使用 for() 循环将参数保存到数组中，然后继续使用 append() 方法将它们添加到 url 的末尾。下面的代码显示了我如何尝试一个接一个地单独附加每个参数

 var url = new URL("file:database/reports/getCurrentStorageOverview.php?params=excel");

  var query_string = url.search;

  var search_params = new URLSearchParams(query_string);

  search_params.append('params', $("#searchParameter1").val());
  search_params.append('params', $("#searchParameter2").val());
  search_params.append('params', $("#searchParameter3").val());
  search_params.append('params', $("#searchParameter4").val());

  url.search = search_params.toString();

  var new_url = url.toString();

  window.open("database/reports/getCurrentStorageOverview.php?params=excel");

console.log(new_url);

参数应该添加到 url 的末尾，但是控制台一直告诉我值属性未定义/当我尝试使用数组时它用 4 填充数组"undefined(s)"

Answer 1

这是一种不同的方法，但由于我没有测试过你的方法，我可以向你展示我通常在这种情况下使用的方法：

const querify = obj => {
return Object.keys(obj)
    .map(key => {
        if (typeof obj[key] === 'object') {
            return querify(obj[key])
        } else {
            return `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`
        }
    })
    .join('&') }

这是做什么的，它需要一个像

这样的对象

var filters = { page: 1, length: 10, sortBy: 'id', etc... }

并将其转换为类似于 "page=1&length=10&sortBy=id" 等的查询字符串，因此您可以像这样使用它：

var url = `database/reports/getCurrentStorageOverview.php?${querify(filters)}`

有没有办法使用 javascript/Jquery 将未提交的输入字段的值属性作为 URL 的参数传递？

Is there a way to pass the value attribute of an unsubmitted input field as a parameter of a URL using javascript/Jquery?

javascript

forms

url

parameter-passing

url-parameters