如果我有这样的表格，
<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>
如何在不通过 JavaScript/jQuery 重定向到另一个视图的情况下提交它？
我从 Stack Overflow 上阅读了很多答案，但所有答案都将我重定向到 POST 函数返回的视图。
如何在没有重定向的情况下提交 HTML 表单
IT技术
javascript
jquery
html
forms
2021-02-10 19:10:51
6个回答
您可以通过将表单重定向action到一个不可见的<iframe>. 它不需要任何 JavaScript 或任何其他类型的脚本。
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form action="submitscript.php" target="dummyframe">
<!-- Form body here -->
</form>
为了实现您想要的，您需要使用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");
}
});
}
由于所有当前的答案都使用 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);
}
iFrame在您的页面底部放置一个 hidden并将target其放入您的表单中：
<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 来面向未来。
好吧，我不会告诉你一个神奇的方法，因为没有。如果您为表单元素设置了 action 属性，它将重定向。
如果您不希望它重定向，请不要设置任何操作并设置 onsubmit="someFunction();"
在someFunction()你做任何你想做的事情时，（无论是否使用 AJAX），最后，你添加return false;告诉浏览器不要提交表单......