提交一个 php 表单并在 div 上显示其结果，无需重新加载页面

Question

首先，感谢您的热心帮助。

我已经尝试了几乎所有我在 stackoverflow 上找到的东西，但我无法让它工作。

我创建了一个表单来向网站管理员发送文本（而不是电子邮件）。所以我有我的 index.php 文件

    <style>
    .result{
        padding: 20px;
        font-size: 16px;
        background-color:  #ccc;
        color: #fff;
    }
</style>


<form id="contact-form" method="post">
    <div>
        <input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />    
    </div>

    <div>
        <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /> 
    </div>

    <div>
        <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
    </div>

    <div>
        <input type="submit" value="Submit" id="submit-button" name="submit" />
        *indicates a required field 
    </div>

</form>

<div class="result"></div>

这是我的 jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $('#contact-form').submit(function() { 
            $.ajax({ 
                type:"POST",
                url:"sendtext.php",
                data: $("#contact-form").serialize(),
                success: function(response){$(".result").appendTo(response)}

            });
            //return false;
        }); 

    });
</script>

脚本不工作。如果我将action = sendtext.php 放在<form> 中，它将完美运行，但它会带我发送text.php 和echo 消息。

我想要在<div class="result"></div> 中显示echo。

再次感谢您的帮助。

---

更新 #1 几厘米后...

这是我目前所拥有的......

<script>
    $(document).ready(function(){

        $('#contact-form').submit(function(e) { 
            e.preventDefault();
            $.ajax({ 
                type:"POST",
                url:"sendtext.php",
                data: $("#contact-form").serialize(),
                success: function(response){$(".result").append(response)}

            });
            //return false;
        }); 

    });
</script>

---

更新 2

在阅读了所有的 cmets 并尝试了不同的选项后，还没有成功！我按照@guy 的建议做了，它奏效了，但我想使用form 和submit。

再次感谢您为帮助我付出的所有时间。谢谢！

Answer 1

问题在于，当您将 sendText.php 添加为操作时，您的 jQuery 将执行，因为表单已提交，因此可以正常工作... 但是它会还带您到表单的操作字段的页面。您想要做的是不调用提交，而只是制作一个按钮，让 jQuery 监听该按钮上的 click。

代替：

<input type="submit" value="Submit" id="submit-button" name="submit" />

将其更改为常规按钮：

<button id="submit-button">Submit</button>

然后在你的 jQuery 中，更改行

$('#contact-form').submit(function() {

到

$('#submit-button').click(function() {

另外，将 appendTo 更改为 html，然后结果应该会显示在结果 div 中。

----编辑----

这对我有用：

<style>
  .result{
    padding: 20px;
    font-size: 16px;
    background-color:  #ccc;                                                                                                                                                                                                                                                    
    color: #fff;                                                                                                                                                                                                                                                                
  }
</style>

<div id="contact-form" >
<div>
    <input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>

<div>
    <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
</div>

<div>
    <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
</div>

<div>
  <button id="submit-button">Submit</button>
    *indicates a required field
</div>

</div>

<div class="result"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $('#submit-button').click(function() {
         $.ajax({
               type:"post",
               url:"sendText.php",
               data:  $("#contact-form").serialize(),
               success: function(response){
                   $(".result").html(response);
               }
         });
      });
   });
</script>

Answer 2

使用 preventDefault() 函数，使表单不会在提交时进行重定向。 之后，使用 append() 而不是 appendTo()

$('#contact-form').submit(function(e) {

e.preventDefault();

Answer 3

变化：

$(".result").appendTo(response)

到：

$(".result").append(response)

Answer 4

你可以试试这个，

 $(".result").html(response);

而不是

 $(".result").appendTo(response)

Jaavscript：

$(document).ready(function(){
    $('#contact-form').submit(function() {             
        $.ajax({ 
            type:"POST",
            url:"sendtext.php",
            data: $("#contact-form").serialize(),
            success: function(response){
                 $(".result").html(response);
            }

        });
        return false;
    });        
});

Answer 5

您的成功回调中的appendTo 是落后的。在您的示例中，您尝试将 .result 元素附加到 response 变量。应该是：

success: function(response){ response.appendTo(".result")}