停止从 DOM 刷新提交

Stop submit from refreshing from the DOM

本文关键字：刷新 提交 DOM      更新时间：2023-09-26

假设我在页面上有这样的表单：

<form action="/add" method="post">
    <input name="first">
    <button type="submit">Submit</button>
</form>

问题是当我单击提交按钮时，页面会尝试http://localhost/add加载为 URL。我想做的只是简单地从表单发出 HTTP post 请求，然后不重新加载页面，这甚至可以用 HTML 语义来做，还是我必须使用一些 javascript 以某种方式阻止默认操作然后发出请求？

我知道关于这个主题有很多问题，但他们似乎都是通过库或 javascript 发出请求的，而不是像我一样使用内置的表单方法？

您必须使用 AJAX 来实现此效果：

您需要做的第一件事是防止您正在谈论的行为： 

$("button[type='submit']").click(function(e){
    e.preventDefault(); 
    e.stopPropagation();
});

好的，所以这个问题也使用了您可能指的是那个库...... 这就是所谓的jQuery——它会让你的生活更轻松，但如果你想避免它，那就给你的按钮一个id，然后这样做： 

document.getElementById("submitButton").onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();
}

然后，您必须进行 ajax 调用---这涉及收集要发送的表单数据...

data = {
first:    document.getElementByName("first").value;
}

并使实际的 AJAX（又名 XHR）请求---

看起来像这样： 

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

在jQuery中，它更简单一些： 

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: { first : $("input[name='first']").value() }
});

让服务器使用 HTTP 状态代码204 NO CONTENT 进行响应。这会阻止浏览器导航。

演示：http://jsfiddle.net/9r2e1n74/

（注意：这个小提琴不包含我自己的代码;它只是将问题中的表单指向返回204响应的服务）

或者，在form上设置target属性，使其在某个隐藏帧中加载响应。

演示：http://jsfiddle.net/p571jy78/

<form action="/add" method="post" target="formtarget">
    <input name="first">
    <button type="submit">Submit</button>
</form>
<iframe name="formtarget" style="display:none;"></iframe>

或者，使用 JavaScript 处理带有 XMLHttpRequest 的表单提交。

相关文章：