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

Question

我以前从未使用过Ajax，但从我可以看出的是解决问题的解决方案，基本上我在indk.org/contact.html上使用phpmailer表单点击提交它显示了一个新窗口（带您离开网站nav），使用 {"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 = '[e-mail]';                  // SMTP username
    $mail->Password = 'XXX';                         // SMTP password
    $mail->SMTPSecure = 'SSL';                          // Enable encryption, 'ssl' also accepted                                   
    $mail->Port = 587;                        
    $mail->From = '[e-mail]';
    $mail->FromName = $name;
    $mail->AddReplyTo($email,$name);
    $mail->addAddress('[e-mail]', $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

您可以以任何一种方式执行此操作。您可以使用简单的引导程序弹出窗口显示确认，也可以使用Ajax。