提交表单,无需重新加载页面

时间:2010-05-19 13:49:23

标签: php javascript html 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 ......

由于

17 个答案:

答案 0 :(得分:59)

我发现了我认为更简单的方法。 如果您在页面中放置了iframe,则可以将操作的退出重定向到该页面并使其显示。 当然,你什么都不能做。在这种情况下,您可以将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>

答案 1 :(得分:53)

您需要提交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页面,该页面需要处理请求并发送电子邮件。

答案 2 :(得分:20)

你要么使用AJAX,要么

  • 创建iframe并将其附加到文档
  • 将iframe名称设为'foo'
  • 将表单目标设置为'foo'
  • 提交
  • 让表单操作使用'parent.notify(...)'呈现javascript以提供反馈
  • 您可以选择删除iframe

答案 3 :(得分:9)

最快最简单的方法是使用iframe。 在页面底部放置一个框架。

<iframe name="frame"></iframe>

以你的形式做到这一点。

<form target="frame">
</form>

并使你的css中的框架不可见。

iframe{
  display: none;
}

答案 4 :(得分:4)

这正是它如何在没有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>
  ');
}

答案 5 :(得分:4)

这应该解决你的问题。
在这个代码中提交按钮后点击我们调用jquery ajax我们传递url到post发送类型POST / GET
数据:您可以选择输入字段或任何其他数据信息。
成功:如果服务器上的一切正常,则回调 函数参数text,html或json,来自服务器的响应
如果您获得的数据处于某种状态等等,您可以编写写警告。或执行您的代码下一步做什么。

.jar

答案 6 :(得分:3)

您可以尝试将表单的target属性设置为隐藏的iframe,这样包含该表单的页面就不会重新加载。

我尝试使用文件上传(我们知道无法通过AJAX完成),并且效果很好。

答案 7 :(得分:3)

提交表单而不重新加载页面并在同一页面中获取提交数据的结果

这是我在互联网上找到的解决此问题的一些代码

索引文件:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
    </script>
    <script type="text/javascript">
    function clickButton(){
    var name=document.getElementById('name').value;
    var descr=document.getElementById('descr').value;
    $.ajax({
            type:"post",
            url:"server_action.php",
            data: 
            {  
               'name' :name,
               'descr' :descr
            },
            cache:false,
            success: function (html) 
            {
               alert('Data Send');
               $('#msg').html(html);
            }
            });
            return false;
     }
    </script>
    <form >
    <input type="" name="name" id="name">
    <input type="" name="descr" id="descr">
    <input type="submit" name="" value="submit" onclick="return clickButton();">
    </form>
    <p id="msg"></p>

server_action.php

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

标签:

答案 8 :(得分:3)

在这种情况下,必须接受jquery-ajax的帮助。没有ajax,目前没有解决方案。

首先,在提交表单时调用JavaScript函数。只需设置onsubmit="func()"即可。即使调用该函数,也会执行提交的默认操作。如果执行该操作,将无法阻止页面刷新或重定向。因此,下一个任务是阻止默认操作。在func()的开头插入以下行。

event.preventDefault()

现在,没有重定向或刷新。所以,你只需从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(){...},
    });
}

答案 9 :(得分:2)

您是否尝试过使用iFrame?没有ajax,原始页面也不会加载。

您可以将提交表单显示为iframe中的单独页面,当提交时,外部/容器页面将不会重新加载。该解决方案不会使用任何类型的ajax。

答案 10 :(得分:0)

我不懂JavaScript,而我才刚刚开始学习PHP,因此,从所有这些响应中对我有所帮助的是:

  1. 创建inedx.php并插入:
<iframe name="email" style=""></iframe>
<form action="email.php" method="post" target="email">
<input type="email" name="email" >
<input type="submit" name="Submit" value="Submit">
</form>
  1. 创建email.php并插入以下代码以检查是否正在获取数据(您应该在iframe中的index.php上看到它):
    <?php
    if (isset($_POST['Submit'])){
    $email = $_POST['email'];
    echo $email;
    }
    ?>
  1. 如果一切正常,请将email.php上的代码更改为:
    <?php
    if (isset($_POST['Submit'])){
    $to = $_POST['email'];
    $subject = "Test email";
    $message = "Test message";
    $headers = "From: test@test.com \r\n";
    $headers .= "Reply-To: test@test.com \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    
    mail($to, $subject, $message, $headers);
    }
    ?>

希望这对像我这样的所有其他菜鸟有帮助:)

答案 11 :(得分:0)

另一种可能性是直接将javascript链接到您的函数:

<form action="javascript:your_function();" method="post">

...

答案 12 :(得分:0)

如果您要提交到表单所在的同一页面,则可以编写表单标记而不执行操作,并且会提交,如下所示

 public boolean equals(List input) {

       return compare(point1, input) && compare(point2, input) && compare(point3, input);

    }

答案 13 :(得分:0)

您需要使用JavaScript而不会产生iframe(丑陋的方法)。

你可以用JavaScript做到这一点;使用jQuery会让它变得轻松无比。

我建议您查看AJAX和发布信息。

答案 14 :(得分:-1)

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');
      }
   }   );
}

我多次尝试过一个很好的解决方案,而@taufique的回答帮助我得出了这个答案。

NB :不要忘记将event.preventDefault();放在函数正文的开头。

答案 15 :(得分:-1)

如果您不想使用javascript

,将重新加载该页面

答案 16 :(得分:-5)

这是一些用于发布到php页面并获取html的jQuery:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});