表單不會返回所需的結果

Question

我的表單不會返回 JSON 格式的所需結果，由表單后的腳本標記完成。

關於我做錯了什么有什么建議嗎？

<form action="/lookup/:url" method="GET">
  <div class="inner-form">
    <div class="input-field first-wrap">
      <div class="svg-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 "></path>
                        </svg>
      </div>
      <input id="search" type="text" placeholder="Paste a domain here" />
    </div>

    <div class="input-field second-wrap">
      <button class="btn-search" type="submit">SEARCH</button>
    </div>

  </div>
  <span class="info">ex. JeepBeef.com</span>
</form>

<script>
  data = await fetch("/lookup/:url").then(result => result.json())
</script>

Answer 1

聽取表單的“提交”事件，使用Event.preventDefault() ，而不是你的 AJAX 東西。

async function onFormSubmit(ev) {
  ev.preventDefault();
  const EL_form = ev.currentTarget;
  return (await fetch(EL_form.action)).json();
}

const ELS_form = document.querySelectorAll("form[action]");
ELS_form.forEach((el) => el.addEventListener("submit", (ev) => {
  onFormSubmit(ev).then(res => console.log(res));
}));

MDN：使用獲取

如果稍后您決定使用fetch()發送 FormData

• 確保在您的 ID搜索字段中使用name="search"
• 使用取數據Object：

const FD = new FormData(EL_form);
fetch(EL_form.action, {method: 'post', body: FD})