如何在不redirect的情况下提交html表单?

如果我有这样的forms:

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

如何提交它没有通过JavaScript / JQuery的redirect到另一个视图? 我从StackOverflow读取了很多答案,但是他们都将我redirect到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 (OP添加了这部分,因为这是他的最终解决scheme)

这工作完美无瑕。 我从Html.ActionLink(...)调用这个函数,

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

您可以通过将表单的actionredirect到<iframe> 。 它不需要JavaScript或任何其他types的脚本。

 <iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe> <form action="submitscript.php" target="dummyframe"> <!-- form body here --> </form> 

如果你真的很狡猾,你可以在CSS中修改position=absolutez-index值,以确保框架不会渲染。 如果事情太重要,那么无论如何,使用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> 

快捷方便。 请记住,尽pipetarget属性仍受到广泛支持(在HTML5中受支持),但它已在HTML 4.01中被弃用。 所以你真的应该使用Ajax来面向未来。

好吧,我不会告诉你一个神奇的做法,因为没有。 如果您为表单元素设置了操作属性, 则会redirect。

如果你不想redirect,就不要设置任何动作,并设置onsubmit="someFunction();"

在你的someFunction()你做任何你想做的事(用AJAX或不),在结尾添加return false; 告诉浏览器不要提交表单…

看jQuery的post函数。

我会创build一个button,并设置一个onClickListener$('#button').on('click', function(){}); ),并在函数中发送数据。

另外,请参阅jQuery的preventDefault函数!

你需要一个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; }); }); 

通过将提交button移到表单外部,也可以实现所需的效果:

阻止页面重新加载并在表单上redirect提交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>