【问题标题】:Ajax Comment Form_Return PHP responseAjax Comment Form_Return PHP 响应
【发布时间】:2012-02-19 22:28:31
【问题描述】:

我正在创建一个基于 jquery 验证插件 (http://docs.jquery.com/Plugins/Validation) 的评论表单。我正在尝试将 jquery 验证插件与我的表单集成,但无法通过 ajax 让 php 响应消息出现在表单下。

目前,“已打印”的 php 消息“表单提交成功”显示为浏览器弹出窗口。如何配置 AJAX / JS 以在 html 表单下方显示 php 消息“表单提交成功”?

 <script>
 $(document).ready(function(){
 $("#commentForm").submit(function(){
    if($("#commentForm").validate()){
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData){
                alert(returnedData);
            }
        });
    }
    return false; }); });
  </script>

<form class="cmxform" id="commentForm" method="POST" action="process.php">
   <label for="cname">Name</label>
   <input id="cname" name="name" size="25" class="required" minlength="2" />
   <label for="cemail">E-Mail</label>
   <input id="cemail" name="email" size="25"  class="required email" />
   <label for="curl">URL</label>
   <input id="curl" name="url" size="25"  class="url" value="" />
   <label for="ccomment">Your comment</label>
   <textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
<input class="submit" type="submit" value="Submit"/>

而且 php 也很标准:

<?php

$to      = 'sdfsadfssfasd@gmail.com';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: webmaster@example.com';

mail($to, $subject, $message, $headers);

print "Form submitted successfully: <br>Your name is <b>".$_POST['cname']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

感谢您的帮助。

【问题讨论】:

    标签: php ajax forms contact


    【解决方案1】:

    使用 jQuery .append() 方法代替警报,就是这样!这会将您发送给客户端的文本/html 附加到表单中。如果要在顶部显示消息,可以使用prepend()

    success: function(returnedData){
                    $('#commentForm').append(returnedData);
                }
    

    【讨论】:

    • 谢谢你,这是一个很大的帮助。但浏览器仍在向我发送我试图阻止的弹出框。
    • 别忘了取出警报(returnedData); .谢谢完美回答
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-07
    • 2012-04-24
    • 2016-03-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多