Php 在同一页上显示提交的表单响应。（无重新加载）

我如何显示来自已提交联系人表单的响应（在表单下的同一页上），而不是在提交后将用户发送到新页面

我看到一些人创建了一个div元素，然后将收到的响应放入其中。这是推荐的方法吗

以下是我到目前为止的情况：

PHP:

<?php

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];

$to = "support@loaidesign.co.uk";
$subject = "";
$message = "";
$headers = "From: $email";

if(mail($to,$subject,$message,$headers))
{
    echo "<h2>Thank you for your comment</h2>";
}
else{
    echo "<h2>Sorry, there has been an error</2>";
}

?>

下面是HTML：

<div class="wrapperB">
                <div class="content">
                    <form id="contactForm" action="assets/email.php" method="get">

                        <label  for="name">Your Name</label>
                        <input  name="name" id="name" type="text" required placeholder="Please enter your name">

                        <label  for="email">Email Address</label>
                        <input  name="email" id="email" type="email" required placeholder="Please enter your email address here">

                        <label  for="message">Message</label>
                        <textarea name="message" id="message" required></textarea>  

                        <button id="submit" type="submit">Send</button> 
                    </form>
                        </div>
                    </div>                  
                </div>

你的名字
电子邮件地址
消息
发送

为此，您需要使用ajax。最简单的解决方案是获得

jQuery

javascript库，并使用它的

.post

函数，您可以找到相关文档和示例。在您的情况下，它将如下所示：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){
    var name_value = $("#name").val();
    var email_value = $("#email").val();
    var message_value = $("#message").val();
    $.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
        $("#response").html(data);
    });
  });
})
</script>

您将获得所有3个变量的

$\u GET['name']

编辑：

---

我添加了一个完整的例子，但它没有经过测试，只是为了让你知道如何做你想做的事情。另外，由于这是使用HTTP POST请求，您需要编辑PHP，以便它获取值

$\u POST

数组，而不是

$\u GET

。此外，您还需要在想要显示响应的位置添加一个

。

您可以将其保留在同一页面上。例如，如果您的表单位于

contact.php

，只需像这样回显您的代码：

<form action='' method='post'>
   <input type='test' name='name' placeholder='Your name here' required='required' /><br />
   <input type='submit' value='submit' name='contact' />
</form>
<?php
   if(isset($_POST['contact']) && !empty($_POST['name'])){
      echo "You submitted this form with value ".$_POST['name'].".";
   }
?>

---

当然，这将重新加载该页面。如果不想重新加载页面，则需要使用ajax。

这是一个使用and答案的工作示例

解决方案： 将其放置在网页的

中

或

下载JQuery并以同样的方式包含它

表格： 您的联系方式保持不变

<form id="contactForm" action="assets/email.php" Method="POST">
    <label for="name">Your Name</label>
    <input name="name" type="text" required placeholder="Please enter your name">

    <label for="email">Email Address</label>
    <input name="email" type="email" required placeholder="Please enter your email address here">

    <label for="message">Message</label>
    <textarea name="message" required></textarea>  

    <button type="submit">Send</button>
</form>

你的名字
电子邮件地址
消息
发送

返回的数据： 将响应元素添加到正文中所需的位置

Javascript: 现在放置javascript代码（最好在

之前）：

<script>
     $("#contactForm").submit(function(event) 
     {
         /* stop form from submitting normally */
         event.preventDefault();

         /* get some values from elements on the page: */
         var $form = $( this ),
             $submit = $form.find( 'button[type="submit"]' ),
             name_value = $form.find( 'input[name="name"]' ).val(),
             email_value = $form.find( 'input[name="email"]' ).val(),
             message_value = $form.find( 'textarea[name="message"]' ).val(),
             url = $form.attr('action');

         /* Send the data using post */
         var posting = $.post( url, { 
                           name: name_value, 
                           email: email_value, 
                           message: message_value 
                       });

         posting.done(function( data )
         {
             /* Put the results in a div */
             $( "#contactResponse" ).html(data);

             /* Change the button text. */
             $submit.text('Sent, Thank you');

             /* Disable the button. */
             $submit.attr("disabled", true);
         });
    });
</script>

$（“#联系人表单”）。提交（功能（事件）
{
/*阻止表单正常提交*/
event.preventDefault（）；
/*从页面上的元素获取一些值：*/
var$form=$（此），
$submit=$form.find（'button[type=“submit”]'），
name_value=$form.find（'input[name=“name”]”）。val（），
email_value=$form.find（'input[name=“email”]”）。val（），
message_value=$form.find（'textarea[name=“message”]”）。val（），
url=$form.attr（'action'）；
/*使用post发送数据*/
var posting=$.post（url，{
name:name_值，
email:email_值，
消息：消息值
});
过帐.完成（功能（数据）
{
/*将结果放入div中*/
$（“#contactResponse”）.html（数据）；
/*更改按钮文本*/
$submit.text（'Sent，谢谢'）；
/*禁用按钮*/
$submit.attr（“已禁用”，true）；
});
});

动作脚本： 您的联系人（PHP）文件保持不变，但将$\u GET更改为$\u POST:

<?php

    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "xxx@xxx.xxx";
    $subject = "";
    $message = "";
    $headers = "From: $email";

    if( mail($to,$subject,$message,$headers) )
    {
        echo "<h2>Thank you for your comment</h2>";
    }
    else
    {
        echo "<h2>Sorry, there has been an error</h2>";
    }

?>

结果: 现在应该在提交时从表单发送数据，然后在

#contactResponse

元素中显示返回的数据。该按钮还会将文本设置为“已发送，谢谢”，同时也会禁用该按钮。

我使用了。还有一个

---

参与面要大得多。它包括上传一个文件，以及一些用户输入的字段和标题中的基本身份验证凭据。表单插件使用普通的$.ajax字段来处理它们。

您可以使用单词

响应
。你能为我们定义一下吗？您的意思是
回复
？回复文本是以下两个：echo“感谢您的评论”；}else{echo“抱歉，发生错误”；我想在同一页/div上显示它们，而不是在新页上显示它们。对不起，这是我方面的误解。当我做一些研究时，我看到了这个解决方案，并试图在我已有的基础上实现它，但我没有让它起作用，这对我来说是全新的，你能告诉我如何在我当前的代码上植入吗？有吗无论如何，如果电子邮件发布成功，请更改“发送”按钮（发送至“发送，谢谢”）并更改CSS样式？如果电子邮件未成功，请显示错误？@Leo请参阅我上面的修订答案，希望这有帮助：）谢谢，我还注意到您已删除了Method=“Post”从HTML来看，我也需要这样做吗？正如我所拥有的那样on@Leo由于JQuery接管了提交事件，并且现在正在使用ajax，
Method=“Post”
随后就变得无用了。编辑：再三考虑，让非javascript用户保留此选项。@Leo在签入调试器后，它似乎是
。按钮（“刷新”）；
不是必需的，我在示例中删除了它。
<?php

    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "xxx@xxx.xxx";
    $subject = "";
    $message = "";
    $headers = "From: $email";

    if( mail($to,$subject,$message,$headers) )
    {
        echo "<h2>Thank you for your comment</h2>";
    }
    else
    {
        echo "<h2>Sorry, there has been an error</h2>";
    }

?>