提交表单而不重新加载页面
我有一个分类广告网站，并在广告显示的网页上，我正在创build一个“发送给朋友的小费”forms…
因此，任何想要的人都可以将广告的提示发送给某些朋友的电子邮件地址。
我猜表单必须提交到一个PHP页面？
<form name='tip' method='post' action='tip.php'> Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/> <input type="submit" value="Skicka Tips"/> <input type="hidden" name="ad_id" /> </form> 提交表单时，页面重新加载…我不想那个…
有没有办法让它不能重新加载，仍然发送邮件？ 最好没有ajax或jQuery …
谢谢
你需要提交一个Ajax请求来发送邮件，而不用重新加载页面。 看看http://api.jquery.com/jQuery.ajax/
你的代码应该是这样的：
$('#submit').click(function() { $.ajax({ url: 'send_email.php', type: 'POST', data: { email: 'email@example.com', message: 'hello world!' }, success: function(msg) { alert('Email Sent'); } }); });
表单将在后台提交到send_email.php页面，这将需要处理请求并发送电子邮件。
我发现我认为是一个更简单的方法。 如果您在页面中放置一个Iframe，您可以将动作的退出redirect到此处并使其显示出来。 当然，你什么都不能做。 在这种情况下，您可以将iframe显示设置为无。
<iframe name="votar" style="display:none;"></iframe> <form action="tip.php" method="post" target="votar"> <input type="submit" value="Skicka Tips"> <input type="hidden" name="ad_id" value="2"> </form>
你或者使用AJAX或者你
- 创build并附加一个iframe到文档
- 将iframe名称设置为“foo”
- 将表单目标设置为“foo”
- 提交
- 有forms动作呈现与'parent.notify（…）'的JavaScript给予反馈
- 您可以select删除iframe
最简单和最简单的方法是使用iframe。 把一个框架放在页面的底部。
<iframe name="frame"></iframe>
并在你的forms做到这一点。
<form target="frame"> </form>
并使框架在你的css中不可见。
iframe{ display: none; }
这正是它如何能没有jQuery和AJAX的工作，它使用一个简单的iFrame工作得很好。 我喜欢它，在Opera10，FF3和IE6中工作。 感谢上面的一些海报指出了正确的方向，这是我在这里发布的唯一原因：
<select name="aAddToPage[65654]" onchange=" if (bCanAddMore) { addToPage(65654,this); } else { alert('Could not add another, wait until previous is added.'); this.options[0].selected = true; }; " /> <option value="">Add to page..</option> [more options with values here]</select> <script type="text/javascript"> function addToPage(iProduct, oSelect){ iPage = oSelect.options[oSelect.selectedIndex].value; if (iPage != "") { bCanAddMore = false; window.hiddenFrame.document.formFrame.iProduct.value = iProduct; window.hiddenFrame.document.formFrame.iAddToPage.value = iPage; window.hiddenFrame.document.formFrame.submit(); } } var bCanAddMore = true;</script> <iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>
生成上面被调用的页面的php代码：
if( $_GET['p'] == 'addProductToPage' ){ // hidden form processing if(!empty($_POST['iAddToPage'])) { //.. do something with it.. } print(' <html> <body> <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" > <input type="hidden" name="iProduct" value="" /> <input type="hidden" name="iAddToPage" value="" /> </form> </body> </html> '); }
您可以尝试将表单的目标属性设置为隐藏的iframe，以便包含该表单的页面不会重新加载。
我尝试了file upload（我们知道不能通过AJAX来完成），它运行得非常漂亮。
在这种情况下，需要帮助jquery-ajax 。 没有ajax ，目前还没有解决scheme。
首先，在提交表单时调用JavaScript函数。 只需设置onsubmit="func()" 。 即使调用该函数，也会执行提交的默认操作。 如果执行，则无法停止刷新或redirect页面。 所以，接下来的任务是防止默认操作。 在func()的开头插入以下行。
event.preventDefault()
现在，不会有redirect或提神。 所以，你只需从func()调用一个ajax调用，并在通话结束时做任何你想做的事情。
例：
形成：
<form id="form-id" onsubmit="func()"> <input id="input-id" type="text"> </form>
使用Javascript：
function func(){ event.preventDefault(); var newValue = $('#input-field-id').val(); $.ajax({ type: 'POST', url: '...', data: {...}, datatype: 'JSON', success: function(data){...}, error: function(){...}, }); }
你有没有尝试过使用iFrame？ 没有Ajax，原来的页面将不会加载。
您可以将提交表单显示为iframe中的单独页面，并且在提交时，外部/容器页面将不会重新加载。 这个解决scheme不会使用任何种类的Ajax。
这应该解决你的问题。
在这个代码提交button后点击我们调用jQuery的ajax，我们通过url发布
键入POST / GET
数据：数据信息，您可以selectinput字段或任何其他。
成功：callback，如果从服务器一切正常
函数参数文本，html或json，来自服务器的响应
如果你得到的数据处于某种状态等等，你可以写成警告。 或者执行你的代码接下来要做什么。
<form id='tip'> Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/> <input type="submit" id="submit" value="Skicka Tips"/> <input type="hidden" id="ad_id" name="ad_id" /> </form> <script> $( "#tip" ).submit(function( e ) { e.preventDefault(); $.ajax({ url: tip.php, type:'POST', data: { tip_email: $('#tip_email').val(), ad_id: $('#ad_id').val() }, success: function(msg) { alert('Email Sent'); } }); }); </script>
您将需要使用JavaScript，而不会导致iframe （丑陋的方法）。
你可以用JavaScript来做; 使用jQuery将使其无痛。
我build议你看看AJAX和发布。
如果你要提交表单的同一个页面，你可以写一个表单标签，但是它会提交，就像这样
<form method='post'> <!-- you can see there is no action here-->
如果你不想使用JavaScript，页面将被重新加载
function Foo(){ event.preventDefault(); $.ajax( { url:"<?php echo base_url();?>Controllername/ctlr_function", type:"POST", data:'email='+$("#email").val(), success:function(msg) { alert('You are subscribed'); } } ); }
我多次尝试了一个很好的解决scheme，@taufique的回答帮助我得出了这个答案。
注意 ：不要忘记把event.preventDefault(); 在函数体的开头。
这里是一些jQuery的张贴到一个PHP页面，并返回HTML：
$('form').submit(function() { $.post('tip.php', function(html) { // do what you need in your success callback } return false; });
