时间戳

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

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

问题描述

我正在尝试检索未提交的输入字段的值属性作为打开/保存 Excel 文件的 URL 的参数。参数应该用于过滤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 的末尾，但是控制台一直告诉我 value 属性是未定义的/当我尝试使用数组时，它正在用 4 个“undefined(s)”填充数组

标签： javascriptformsurlparameter-passingurl-parameters

解决方案

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

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)}`

推荐阅读