Ajaxifying php页面结果数据

时间:2017-09-18 10:18:36

标签: php ajax phpmailer

我想在填写联系我们表格后由用户发送邮件到domain@host.com。 成功发送或两种情况下发送失败消息显示在新页面中,我想在提交后在我的联系我们页面上显示这些消息。

HTML

    <form  id="form"class="form" action="sendEmail.php" method="POST">

    <p class="name">
        <input type="text" name="name" id="name" placeholder="John Doe" />
        <label for="name">Name</label>
    </p>

    <p class="email">
        <input type="text" name="email" id="email" placeholder="mail@example.com" />
        <label for="email">Email</label>
    </p>

    <p class="subject">
        <input type="text" name="subject" id="subject" placeholder="www.example.com" />
        <label for="subject">subject</label>
    </p>        

    <p class="text">
        <textarea name="message" id="comment" placeholder="Write something to us" /></textarea>
    </p>
              <div id="complete" class="complete hide">
        <h3>Thank you</h3>
        <p>We will be in contact with you soon!</p>
      </div>
    <p class="submit">
        <input type="submit" value="Send" />
    </p>




</form>

这是我的sendEmail.php代码

        <?php
    $toAddress = 'domain@host.com'; //eamil will be sent to this account...
    $EmailSentBy= $_POST['email'];
    $userEmail = $_POST['name'];
    $title = $_POST['subject'];
    $message = $_POST['message'];
    //****************************************************************


    require 'PHPMailer-5.2.23/PHPMailerAutoload.php';

    //Create a new PHPMailer instance
    $mail = new PHPMailer;

    //Tell PHPMailer to use SMTP
    $mail -> isSMTP();

    //Enable SMTP debugging
    // 0 = off (for production use)
    // 1 = client messages
    // 2 = client and server messages
    $mail -> SMTPDebug = 0;

    //Ask for HTML-friendly debug output
    $mail -> Debugoutput = 'html';

    //Set the hostname of the mail server
    $mail -> Host = 'smtp.gmail.com';///
    // use
    // $mail->Host = gethostbyname('smtp.gmail.com');
    // if your network does not support SMTP over IPv6

    //Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
    $mail -> Port = 587;

    //Set the encryption system to use - ssl (deprecated) or tls
    $mail -> SMTPSecure = 'tls';

    //Whether to use SMTP authentication
    $mail -> SMTPAuth = true;

    //Username to use for SMTP authentication - use full email address for gmail
    $mail -> Username = "domain@host.com";//email address from which it is send to other // 

    //Password to use for SMTP authentication
    $mail -> Password = "ooovxxazwdbxmcgn";//password of website email account

    //Set who the message is to be sent from
    $mail -> setFrom($toAddress, "Contact Us Page");

    //Set an alternative reply-to address
    $mail -> addReplyTo($userEmail, "UserName here");

    //Set who the message is to be sent to
    $mail -> addAddress($toAddress, "Mr/Mrs.");//receiver

    //Set the subject line
    $mail -> Subject = $title;


    $msg = 'Message';

    //$mail->msgHTML(file_get_contents('contents.html'), dirname(__FILE__));
    $mail -> msgHTML($msg);

    //Replace the plain text body with one created manually
    $mail -> AltBody = 'This is an auto generated email from oric.uob.edu.pk';

    //Attach an image file
    //$mail->addAttachment('images/phpmailer_mini.png');


    //************************************************************************
    if (!$mail -> send()) {

   echo json_encode(array('status' => false, 'msg' => 'There was a problem while sending Email' . $mailer -> ErrorInfo));

die();

}else{

echo json_encode(array('status' => TRUE, 'msg' => 'Successfully Approved'));
die();
    }
    ?>

的Jscript

    $(function() {
  var form = $('#form');


  $(form).submit(function(event) {

    event.preventDefault();
    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response) {
      response=$("#msg").html("<i>Thank you </i>")

    })
    .fail(function(data) {

    });
  })
});

我无法找出哪里出错,任何形式的帮助都会非常感激。 提前致谢。

2 个答案:

答案 0 :(得分:2)

我认为您应该选择通过POST(使用<form method="POST">或使用$.ajax()的ajax)提交表单数据,但不应同时使用这两种数据。

目前,您的Javascript被绕过:当您点击提交按钮时,浏览器正在请求sendEmail.php并等待响应,而无需调用您的JavaScript。

如果您希望在同一页面上显示呈现的sendEmail.php,则应更改

<input type="submit" value="Send" />

<button id="sendmail">Send</button>

然后使用Jquery选择它,例如

$('#sendmail').on('click', function(e) { /* your AJAX goes here */ });

此外,您应该知道,每个能够生成POST请求的人都可以滥用您的PHP脚本并使用您的邮件帐户发送任意电子邮件

答案 1 :(得分:1)

您没有正确地从Jscript中的sendEmail.php获取结果数据,因为您在echo json_encode(array('status' => false, 'msg' => 'There was a problem while sending Email' . $mailer -> ErrorInfo));中使用了状态和消息 您应该在表单标签中删除method = post,这两个可能会让您遇到麻烦 创建Jscript函数并在submint按钮中使用onClick属性。

<input type="submit" onClick="myfun()"/>

<强>的Jscript

function myfun()
{
        var data = $("#loginForm").serialize();// form ki id 

    $.ajax({
    method : "POST",
    url : "process/login.php",  //process file
    dataType : "json",
    //data : data,
    }).done(function(data) {
    status = data["status"];


    if (status == true | status=="true") {
    msg1 = data["msg"];
    msg = msg1;
    alert(msg);

    } else {

    msg1 = data["msg"];
    // alert(msg);
    msg = msg1;
    var Error_message = '<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>  <strong> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i></strong>  ' + msg + '</div>';
    response.html(Error_message);

    }

    }).fail(function(x, y, z) {
    var msg = x.responseText;
    alert(msg);

    response.html(x + y + z);
    });
}

这样就可以了。