如何在没有重定向的情况下提交 HTML 表单

如果我有这样的表格,

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

我怎样才能提交它而不重定向到另一个视图的 JavaScript/jQuery？

我从 Stack Overflow 中读到了大量的答案，但是它们都将我重定向到 POST 函数返回的视图。

250231 次浏览
小开

参见 jQuery 的 post函数。

我将创建一个按钮，并设置一个 onClickListener($('#button').on('click', function(){});) ，然后在函数中发送数据。

另外，请参阅 jQuery 的 preventDefault函数！

小开
最佳答案

为了达到你想要的效果，你需要使用 JQuery Ajax如下:

$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
url: '/Car/Edit/17/',
type: 'post',
data:$('#myForm').serialize(),
success:function(){
// Whatever you want to do after the form is successfully submitted
}
});
});

也试试这个:

function SubForm(e){
e.preventDefault();
var url = $(this).closest('form').attr('action'),
data = $(this).closest('form').serialize();
$.ajax({
url: url,
type: 'post',
data: data,
success: function(){
// Whatever you want to do after the form is successfully submitted
}
});
}

最终解决方案

我从 Html.ActionLink(...)中调用了这个函数

function SubForm (){
$.ajax({
url: '/Person/Edit/@Model.Id/',
type: 'post',
data: $('#myForm').serialize(),
success: function(){
alert("worked");
}
});
}
小开

你需要 Ajax 来实现它，比如:

$(document).ready(function(){
$("#myform").on('submit', function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();


var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
if(name=='' || email=='' || password=='' || contact=='')
{
alert("Please fill in all fields");
}
else
{
// Ajax code to submit form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
小开

好吧，我不会告诉你什么神奇的方法因为根本就没有。 如果为 form 元素设置了 action 属性，则它 < strong > 将重定向。

如果您不希望它重定向，那么不要设置任何操作并设置 onsubmit="someFunction();"

在你的 someFunction()中，你可以做任何你想做的事情(使用或不使用 AJAX) ，最后，你添加 return false;来告诉浏览器不要提交表单..。

小开

您可以通过将表单的 action重定向到一个不可见的 <iframe>来实现这一点。它不需要任何 JavaScript 或任何其他类型的脚本。

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>


<form action="submitscript.php" target="dummyframe">
<!-- Form body here -->
</form>
小开

在页面底部放置一个隐藏的 iFrame，并以表单的形式显示:

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>


<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

又快又简单。请记住，虽然 target属性仍然受到广泛支持(并且在 HTML5中受到支持) ，但是在 HTML 4.01中已经弃用了它。

因此，您确实应该使用 Ajax 来防范未来。

小开

如下所述，将提交按钮移出表单，也可达到预期效果:

防止在表单提交 ajax/jquery 时重新加载和重定向页面

像这样:

<form id="getPatientsForm">
Enter URL for patient server
<br/><br/>
<input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
<input name="patientRootUrl" size="100"></input>
<br/><br/>
</form>


<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
小开

使用此代码片段，可以提交表单并避免重定向。相反，您可以将 Success 函数作为参数传递，并执行任何您想要的操作。

function submitForm(form, successFn){
if (form.getAttribute("id") != '' || form.getAttribute("id") != null){
var id = form.getAttribute("id");
} else {
console.log("Form id attribute was not set; the form cannot be serialized");
}


$.ajax({
type: form.method,
url: form.action,
data: $(id).serializeArray(),
dataType: "json",
success: successFn,
//error: errorFn(data)
});
}

然后就这么做:

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
console.log("Form submitted");
});
小开

因为当前所有的答案都使用 jQuery 或者 iframe 的技巧，所以我们认为使用普通的 JavaScript 添加方法没有什么坏处:

function formSubmit(event) {
var url = "/post/url/here";
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.onload = function() { // request successful
// we can use server response to our request now
console.log(request.responseText);
};


request.onerror = function() {
// request failed
};


request.send(new FormData(event.target)); // create FormData from form that triggered event
event.preventDefault();
}


// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
document.getElementById(formId).addEventListener("submit", formSubmit);
}
小开

如果您控制后端，那么使用类似 response.redirect的东西代替 response.send。

您可以为此创建自定义 HTML 页面，或者只是重定向到您已经拥有的内容。

在 Express.js 中:

const handler = (req, res) => {
const { body } = req
handleResponse(body)
.then(data => {
console.log(data)
res.redirect('https://yoursite.com/ok.html')
})
.catch(err => {
console.log(err)
res.redirect('https://yoursite.com/err.html')
})
}
...
app.post('/endpoint', handler)
小开

如果你的数据不是以 multipart/form-data或者 application/x-www-form-urlencoded的形式发送，那么从2020年开始的一行程序解决方案:

<form onsubmit='return false'>
<!-- ... -->
</form>
小开

放弃香草 js + 苗条

function handleSubmit(e) {
const request = new Request(`/products/${item.ItemCode}?_method=PUT`, {
method: 'POST',
body: new FormData(e.target),
});
fetch(request)
}

用于 Svelte:

<form method="post" on:submit|preventDefault={handleSubmit}>
小开

禁用表单提交。和用户 Ajax 为您自定义！


提交答案