Question

说我在页面上有这样的表格：

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

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

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

Answer 1

您必须使用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() }
});

Answer 2

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

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

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

或者，在target上设置form属性，让它在某个隐藏框架中加载响应。

演示：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处理表单提交。

停止从DOM刷新提交

2 个答案: