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

Posted 2023-02-22

【中文标题】有没有办法使用 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?

【发布时间】：2020-01-26 19:23:31

【问题描述】：

我正在尝试检索未提交的输入字段的值属性作为打开/保存 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 个“未定义”填充数组

【参考方案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)`

【讨论】：

我试试看告诉你

const querify = search_params => return Object.keys(search_params).map(key => if(typeof search_params[key] === 'object') return querify(search_params[key]) else return "$encodeURIComponent(key)=$encodeURIComponent(obj[key])" ` ` ).join('&') var url = "database/reports/getCurrentStorageOverview.php?params=excel&$querify(search_params)" console.log(url); ` window.open(url) >

我只是将“encodeURI ...”卡在 url 字符串的末尾。你能帮忙吗？提前谢谢你

您使用的是 alt+96 引号吗？这是使 js 在 $ 部分中工作的唯一方法。否则与 + 符号连接，如下所示：return encodeURIComponente(key) + "=" + encodeURIComponent(obj[key])，应该这样做！如果这让你感到困扰，也对 url 做同样的事情，对不起，我太习惯这种语法了，呵呵

我也尝试了您使用的方法，URL 对象有一个名为 searchParams 的属性，它已经是一个 URLSearchParams 对象。您是否尝试过直接附加到它而不是创建一个新的并将 toString 分配给搜索和 blabla？您唯一需要做的就是像第一行一样创建 url，像您知道的那样将每个参数附加到 searchParams 属性，然后在 url 上调用 toString() 以获取它的最终字符串版本。对不起，我用我的方式误导了你哈哈我昨天没有时间尝试你的，但希望他们中的任何一个可以帮助你！