时间戳

首页 > 解决方案 > 尝试在提交表单时附加到 URL

javascript - 尝试在提交表单时附加到 URL

问题描述

提交表单后，我想将输入文本字段中的值附加到 URL。所以当 URL 是 http://localhost:8080/myfile.html?Filters=p1%3D"Hello" 然后我提交到文本字段 p2="Bye" 我希望 URL 是 http://localhost: 8080/myfile.html?Filters=p1%3D"你好"&Filters=p2%3D"再见"

但是由于某种原因，当我按下提交时，所需的 URL 会出现一秒钟，但是在页面加载时，URL 变为 http://localhost:8080/myfile.html?Filters=p2%3D"Bye" 即第一个过滤器被覆盖. 不知道是不是和点击提交刷新页面有关？

这样做的目的基本上是我想从列表中过滤结果，并且能够通过输入文本框一个一个地添加像 p1="Hello" 这样的过滤器。也许有更好的方法来做到这一点。

HTML：

  <form onsubmit="appendFilter()">
    <label for="filters">Add filter:</label><br>
    <input type=text id="filters" name="Filters" placeholder="Filter results..">
    <input type="submit">
  </form>

JavaScript：

  function appendFilter() {
    var filter = document.getElementById('filters').value
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.append("Filters", filter)

    window.history.replaceState({}, '', `${location.pathname}?${searchParams}`);
  }

标签： javascripthtmlformsurl

解决方案

你在做什么是不正确的。

<form onSubmit={(e) => {e.preventDefault(); submit()}}>
  // form things
</form>

...

const submit = () => {
  // apply any logic here

  fetch('https://example.com', {
    method: 'post',
    body: JSON.stringify({
      // form values here
    })
  }

  // or window.location.href= // params here
}

推荐阅读