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

如果我有这样的forms：

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

如何提交它没有通过JavaScript / JQuery的redirect到另一个视图？ 我从StackOverflow读取了很多答案，但是他们都将我redirect到POST函数返回的视图。

Answer 1

为了实现你想要的，你需要使用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"); } }); } 

Answer 2

您可以通过将表单的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=absolute和z-index值，以确保框架不会渲染。 如果事情太重要，那么无论如何，使用AJAX可能会更好。

Answer 3

在页面底部放置一个隐藏的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来面向未来。

Answer 4

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

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

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

Answer 5

看jQuery的post函数。

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

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

Answer 6

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

Answer 7

通过将提交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>