php/ajax-{"success": {"title" :"Message Sent"}}

Question

我以前从未使用过 ajax，但据我所知，这是我的问题的解决方案，基本上我在 indk.org/contact.html 上使用 PHPmailer 表单，当您点击提交时，它会显示一个新窗口(带你离开网站导航)并显示 {"success":{"title":"Message Sent"}}

我如何阻止这种情况发生，或者至少，在网页本身上显示一条已发送确认消息，希望尽可能避免将人们带离网站，因为这是个人作品集。

欢迎任何帮助!谢谢 :) D

    <?php 

    require '../_lib/phpmailer/PHPMailerAutoload.php';

    // CONFIG YOUR FIELDS
    //============================================================
    $name =     filter_var($_POST["name"], FILTER_SANITIZE_STRING);
    $email =    filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $formMessage =  filter_var($_POST["message"], FILTER_SANITIZE_STRING);

    // CONFIG YOUR EMAIL MESSAGE
    //============================================================
    $message = '<p>The following request was sent from: </p>';
    $message .= '<p>Name: ' . $name . '</p>';
    $message .= '<p>Email: ' . $email . '</p>';
    $message .= '<p>Message: ' . $formMessage .'</p>';

    // CONFIG YOUR MAIL SERVER
    //============================================================
    $mail = new PHPMailer;
    $mail->isSMTP();                                    // Enable SMTP     authentication
    $mail->SMTPAuth = true;                             // Set mailer to use SMTP
    $mail->Host = 'mailout.one.com';                // Specify main and backup server (this is a fake name for the use of this example)             

    $mail->Username = 'dk@indk.org';                  // SMTP username
    $mail->Password = 'XXX';                         // SMTP password
    $mail->SMTPSecure = 'SSL';                          // Enable encryption, 'ssl' also accepted                                   
    $mail->Port = 587;                        

    $mail->From = 'dk@indk.org';
    $mail->FromName = $name;
    $mail->AddReplyTo($email,$name);
    $mail->addAddress('dk@indk.org', $name);  // Add a recipient

    $mail->WordWrap = 50;                               // Set word wrap to 50 characters
    $mail->isHTML(true);                                // Set email format to HTML

    $mail->Subject = 'Contact request';
    $mail->Body    = $message;
    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    if(!$mail->send()) {
   $data['error']['title'] = 'Message could not be sent.';
   $data['error']['details'] = 'Mailer Error: ' . $mail->ErrorInfo;
   exit;
}

$data['success']['title'] = 'Message Sent, click back to return to indk.org';


echo json_encode($data);


?>



$(document).ready(function() {
    'use strict';
    $('#contact-form').validate({
        // Override to submit the form via ajax
        submitHandler: function(form) {
            $('#contact-panel').portlet({
                refresh:true
            });
            $.ajax({
                 type:$(form).attr('method'),
                 url: $(form).attr('action'),
                 data: $(form).serialize(),
                 dataType: 'json',
                 success: function(data){
                    console.log(data);
                   //Set your Success Message
                   clearForm("Thank you for Contacting Us! We will be in touch");
                 },
                 error: function(err){
                    $('#contact-panel').portlet({
                        refresh:false,
                        //Set your ERROR Message
                        error:"We could not send your message, Please try Again"
                    });
                 }
            });
            return false; // required to block normal submit since you used ajax
        }
    });
    function clearForm(msg){
        $('#contact-panel').html('<div class="alert alert-success" role="alert">'+msg+'</div>');
    }

    $('#contact-panel').portlet({
        onRefresh: function() {
        }
    });
});

Answer 1

您可以采用任何一种方式。您可以使用简单的 Bootstrap 弹出窗口来显示确认，或者如您所说，您可以使用 AJAX。