async fetch POST提交后跳转至接口页，如何停留在原页面并刷新？

问题根因 #

跳转是因为ADD按钮触发了默认表单提交行为，优先级高于你绑定的异步fetch事件，因此会直接跳转至change-name.php页面。

解决步骤 #

1. 阻止按钮默认提交行为 #

在按钮的点击监听回调中传入事件对象，调用e.preventDefault()取消默认提交。如果你的按钮位于form标签内，也可以给按钮添加type="button"属性，从根源避免默认提交触发。

2. 请求成功后刷新当前页面 #

在fetch请求拿到后端返回的JSON结果后，调用location.reload()即可刷新当前names.php页面。

3. 可选优化 #

你之前手动拼接JSON字符串的方式存在转义风险（比如姓名包含引号时会导致请求体格式错误），改用JSON.stringify()构造请求体更安全。

修改后完整代码 #

按钮部分修改（可选） #

<button type="button" class="addPaxName btn btn-xs btn-warning">ADD</button>

JS部分修改 #

async function updateGuestName(paxid,name){
  // 改用JSON.stringify构造请求体，避免转义错误
  const paxIDbody = JSON.stringify({
    pxid: paxid,
    name: name
  });
  console.log("PaxID:", paxIDbody);
  try {
    const settings = {
      method: "POST",
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      },
      body: paxIDbody,
    };
    const response = await fetch(
      "/change-name.php",
      settings
    );
    const data = await response.json();
    console.log("DATA: ",data);
    // 请求成功后刷新当前页面
    location.reload();
  } catch (error) {
    console.log("ERROR: ",error);
  }
}

function addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  const addPaxName = itemClicked.nextElementSibling;
  const addPaxNameButton = itemClicked.nextElementSibling;
  addPaxNameButton.style.display = 'inline-block';
  var addPaxNameField = document.createElement('input');
  addPaxNameField.setAttribute('type', 'text');
  addPaxNameField.setAttribute('name', 'visitorNameSurname[]');
  addPaxNameField.setAttribute('placeholder', 'Enter Name & Surname');
  itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);
  addPaxNameField.setAttribute("required", "required");
  addPaxNameButton.addEventListener('click', (e) => {
    // 阻止默认提交行为
    e.preventDefault();
    const name = addPaxNameField.value;
    updateGuestName(paxid,name);
  })
}

后端PHP代码不需要修改，已经符合返回JSON的要求。

内容的提问来源于stack exchange，提问作者Grant