[英]How to submit an HTML form without redirection
如果我有这样的表格,
<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>
如何在不通过 JavaScript/jQuery 重定向到另一个视图的情况下提交它?
我从 Stack Overflow 上阅读了很多答案,但所有答案都将我重定向到 POST 函数返回的视图。
您可以通过将表单的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
并将其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()
您可以someFunction()
无论是否使用 AJAX),最后添加return false;
告诉浏览器不要提交表单...
您需要 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;
});
});
从 2020 年开始的单行解决方案,如果您的数据不打算作为multipart/form-data
或application/x-www-form-urlencoded
:
<form onsubmit='return false'>
<!-- ... -->
</form>
参见 jQuery 的post
函数。
我会创建一个按钮,并设置一个onClickListener
( $('#button').on('click', function(){});
),并在函数中发送数据。
另外,请参阅 jQuery 的preventDefault
函数!
也可以通过将提交按钮移到表单外来实现所需的效果,如下所述:
像这样:
<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>
使用此代码段,您可以提交表单并避免重定向。 相反,您可以将成功函数作为参数传递并做任何您想做的事情。
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");
});
如果您控制后端,则使用类似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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.