Если у меня есть такая форма:
<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>
как отправить его без перенаправления на другое представление JavaScript/JQuery? Я прочитал много ответов от StackOverflow, но все они перенаправляют меня на представление, возвращенное функцией POST.
чтобы достичь желаемого, вам нужно использовать jquery ajax, как показано ниже:
$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
url:'/Car/Edit/17/',
type:'post',
data:$('#myForm').serialize(),
success:function(){
//whatever you wanna 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 wanna do after the form is successfully submitted
}
});
}
ОБНОВЛЕНИЕ 2 (ОП добавил эту часть, так как это было его окончательное решение)
Это сработало без нареканий. Я вызываю эту функцию из Html.ActionLink(...)
function SubForm (){
$.ajax({
url:'/Person/Edit/@Model.Id/',
type:'post',
data:$('#myForm').serialize(),
success:function(){
alert("worked");
}
});
}
Вы можете добиться этого, перенаправив форму action в <iframe>. Он не требует скриптов JavaScript или любого другого типа.
<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
<form action="submitscript.php" target="dummyframe">
<!-- form body here -->
</form>
если вы действительно хитрый, вы можете возиться со значением position=absolute и z-index в CSS, чтобы убедиться, что кадр не отображается. Если это имеет большое значение, хотя, возможно, вам будет лучше использовать AJAX.
Поместите скрытый 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 для будущих доказательств.
Хорошо, я не собираюсь говорить вам волшебный способ сделать это, потому что нет. Если у вас есть атрибут действия для элемента формы, он будет перенаправлен.
Если вы не хотите, чтобы он перенаправлял, просто не устанавливайте никаких действий и не устанавливайте onsubmit="someFunction();"
В вашем someFunction() вы делаете все, что хотите (с AJAX или нет), а в конце добавьте return false;, чтобы сообщить браузеру не отправлять форму...
Так как все текущие ответы используют 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);
}
Вам нужен 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 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;
});
});
См. функцию jQuery post.
Я бы создал кнопку и установил onClickListener ($('#button').on('click', function(){});) и отправил данные в эту функцию.
Также см. функцию preventDefault, jQuery!
Желаемый эффект также может быть достигнут путем перемещения кнопки отправки вне формы, как описано здесь:
Запретить перезагрузку и перенаправление страницы в форме submit 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>
Используя этот фрагмент, вы можете отправить форму и избежать перенаправления. Вместо этого вы можете передать функцию успеха в качестве аргумента и делать все, что захотите.
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)