使用 AJAX 在模式上使用 PHP 发送电子邮件答案

【问题标题】：Sending email with PHP on a modal with AJAX使用 AJAX 在模式上使用 PHP 发送电子邮件
【发布时间】：2015-10-23 23:28:22
【问题描述】：

我有一个包含使用 PHP 发送电子邮件的表单的模式。我不希望在发送电子邮件时关闭 Modal，因此我尝试使用 AJAX 发送它而不刷新页面。但是，当我推送提交时，我无法阻止它关闭并且无法弄清楚问题是什么。电子邮件仍在发送，所以我认为这与 AJAX 有关。

    <?php include 'email_form.php';?>

    <?php echo $result; ?>

<form method="post">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" class="form-control" placeholder="Your Name"
        value="<?php echo $_SESSION['post-data']['name']; ?>" />
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" class="form-control" placeholder="Your Email"
        value="<?php echo $_SESSION['post-data']['email']; ?>" />
    </div>
    <div class="form-group">
        <label for="comment">Comment:</label>
        <textarea class="form-control" id="comment" name="comment"><?php echo $_SESSION['post-data']['comment']; ?></textarea>
    </div>
    <div class="modal-footer text-center">
        <input type="submit" name="submit" id="submit" class="btn" value="Submit"/>
    </div>
</form>

PHP

<?php

  $_SESSION['post-data'] = $_POST;

    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $comment = strip_tags($_POST['comment']);

        if ($_POST["submit"]) {



             if (!$_POST['name']) {
                $error="<br />Please enter your name";
             }

             if (!$_POST['email']) {
                $error.="<br />Please enter your email address";
             }

             if (!$_POST['comment']) {
                 $error.="<br />Please enter a comment";
            }

             if ($_POST['email']!="" AND !filter_var($_POST['email'],
                FILTER_VALIDATE_EMAIL)) {
                 $error.="<br />Please enter a valid email address";
             }

             if ($error) {
                 $result='<div class="alert alert-danger"><strong>There were error(s)
                in your form:</strong>'.$error.'</div>';

         } else {

            if (mail("user@email.com", "Comment from website.com", "Name: ".
            $_POST['name']."
                Email: ".$_POST['email']."
                Comment: ".$_POST['comment'])) 

            {
             $result='<div class="alert alert-success"><strong>Thank
            you!</strong> I\'ll be in touch.</div>';

            unset($_SESSION['post-data']['name']);
            unset($_SESSION['post-data']['email']);
            unset($_SESSION['post-data']['comment']);
            session_destroy();

         } else {
            $result='<div class="alert alert-danger">Sorry, there was
            an error sending your message. Please try again later.</div>';

        }

     }
 }

?>

JavaScript

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

    $('#submit').click(function(event) {

    $('.modal').on('hide.bs.modal', function(e) {         
        e.preventDefault();
        });

    var formData = {
        'name'              : $('input[id=name]').val(),
        'email'             : $('input[id=email]').val(),
        'comment'           : $('input[id=comment]').val(),    
    };

    $.ajax({
        type: "post",
        url: "email_form.php", 
        data: formData,
        success: function(msg){
           alert("Email sent");
        },
        error: function(){
            alert("Please try to resubmit");
        }   
    });
});
});

</script>

我也试过了，但它也关闭了模态

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

    $('#submit').submit(function(event) {

        event.preventDefault();


    var formData = {
        'name'              : $('input[id=name]').val(),
        'email'             : $('input[id=email]').val(),
        'comment'           : $('input[id=comment]').val(),    
    };

    $.ajax({
        type: "post",
        url: "email_form.php", 
        data: formData,
        success: function(msg){
           alert("Email sent");
        },
        error: function(){
            alert("Please try to resubmit");
        }   
    });
});
});

</script>

【问题讨论】：

标签： php jquery ajax forms bootstrap-modal

【解决方案1】：

而不是调用

e.preventDefault();

在您的 javascript 的第一个版本中，只需执行以下操作：

return false;

你也可以使用你的 html 的第二个版本，而不是调用 event.preventDefault(); , ajax 调用后在函数结束时返回 false。

【讨论】：

【解决方案2】：

您的第二个 Javascript 示例更接近正确答案。

您将提交事件附加到按钮 ID 而不是表单 ID，这是不正确的。您还不必要地查询您的输入属性。使用以下内容修改您的标记：

<form id="email-submit-form" method="post">

然后用这样的方式修改你的 Javascript：

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

    $('#email-submit-form').submit(function(event) {

        event.preventDefault();

        var formData = {
            'name'              : $('#name').val(),
            'email'             : $('#email').val(),
            'comment'           : $('#comment').val(),
            'submit'            : 'AJAX'  //Rudimentary example to help you differentiate between POST types
        };

        $.ajax({
            type: "post",
            url: "email_form.php", 
            data: formData,
            success: function(msg){
               alert(msg); //See my notes below
            },
            error: function(){
                alert("Please try to resubmit");
            }   
        });
    });
});

您的 PHP 也有很多问题，因为您的原始 AJAX POST 请求中没有“提交”字段，因此它永远不会触发。此外，您尝试将字段设置为会话数据，从不在脚本中使用它们，然后您将在成功时取消设置它们。

会话数据旨在在请求之间持久化数据。你不是在这里做的。

其次，即使你输出了一条错误消息（你的 AJAX 方法不会看到，因为你没有输出任何东西），请求返回的状态码将是 200 并且每次都会触发成功消息，即使是格式错误的数据。

这应该更接近你想要的：

<?php

$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$comment = strip_tags($_POST['comment']);

if ($_POST["submit"]) {
    $error = '';
    if (!$name){
        $error="<br />Please enter your name";
    }
    if (!$email) {
        $error.="<br />Please enter your email address";
    }
    if(!$comment) {
        $error.="<br />Please enter a comment";
    }
    if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error.="<br />Please enter a valid email address";
    }
    if ($error) {
        $result='<div class="alert alert-danger"><strong>There were error(s) in your form:</strong>'.$error.'</div>';
    }
    else {
        if(mail("user@email.com", "Comment from website.com",
            "Name: ".$name."
            Email: ".$email."
            Comment: ".$comment)
        ){
            $result='<div class="alert alert-success"><strong>Thank you!</strong> I\'ll be in touch.</div>';
        } else {
            $result='<div class="alert alert-danger">Sorry, there was
            an error sending your message. Please try again later.</div>';    
        }
    }
    /*
    This will only fire on your above AJAX request, and stop the server from running 
    after this point. All you need is the response for your AJAX script to read
    */
    if($_POST['submit'] === 'AJAX'){
        die($result);
    }
}
?>

综上所述，这在很大程度上未经测试，不能保证完美运行。取而代之的是，这应该能让您更好地了解一切如何协同工作。

祝你好运。

【讨论】：