javascript - 即使我使用的是 preventDefault，页面也会在表单提交时刷新

Question

我正在尝试使用以下方法在提交表单时阻止页面刷新：

window.addEventListener("load", function () {
  let settings_form = document.getElementById("settings_form");

  // handle form submit
  settings_form.addEventListener("submit", function (e) {
    e.preventDefault(); // before the code
    save_settings();

    // Should be triggered on form submit
    console.log("hi");
    return false;
  });
});

但它不起作用。如果我评论该save_settings方法，页面将不会重新加载。显然，我需要那种方法。

function save_settings() {
  //   let form = document.getElementById("settings_form");
  let json_data = toJSONstring(settings_form);
  console.log(json_data);
  post_data("api/settings/change", json_data).then((send_response) => {
    console.log(send_response);
    conn_status = 1;
    // logs to page
    // get_settings() // update interface with newer settings
    get_info();
  });
}

我不知道哪个功能e.preventDefault();不起作用。

有关更多上下文：

// parse form data into json
function toJSONstring(form) {
  let object = {};
  console.log(form);
  let formData = new FormData(form);
  formData.forEach((value, key) => {
    // Reflect.has in favor of: object.hasOwnProperty(key)
    if (!Reflect.has(object, key)) {
      object[key] = value;
      return;
    }
    if (!Array.isArray(object[key])) {
      object[key] = [object[key]];
    }
    object[key].push(value);
  });
  console.log(JSON.stringify(object));
  return JSON.stringify(object);
}

// send/post json
async function post_data(api_path, json_data) {
  let post_url = ROOT_URL + api_path;
  const response = await fetch(post_url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: json_data,
  });
  //check
  if (!response.ok) {
    conn_status = 0;
    const message = `An error has occured: ${response.status}`;
    throw new Error(message);
  }
  return await response.json();
}

<form id="settings_form" class="settings_form">
  <label for="wifi_ssid">Change SSID</label>
  <input type="text" name="wifi_ssid" id="wifi_ssid" />
  <label for="wifi_pass">Change Password</label>
  <input type="text" name="wifi_pass" id="wifi_pass" />

  <label for="ap_ip">Change IP Address</label>
  <input type="text" name="ap_ip" list="ap_ip" />
  <datalist id="ap_ip">
      <option>192.168.100.20</option>
  </datalist>
  <input type="button" value="Save Settings" id="submit_btn">
</form>

我也试过听click按钮上的事件：

window.addEventListener("load", function () {
  let button = document.getElementById("submit_btn");

  // handle form submit
  button.addEventListener("click", function (e) {
    e.preventDefault(); // before the code
    save_settings();

    // Should be triggered on form submit
    console.log("hi");
    return false;
  });
});

后期编辑：

我正在运行一个本地模型 JSON 服务器来测试我的代码。

我在这里尝试了代码：https ://jsbin.com/xogozovawe/1/edit?html,js,output并且它有效。

这可能是本地服务器的错吗？

标签： javascript