jQuery Ajax를 사용하여 성공적으로 보낸 전자 메일 표시

Question

전자 메일을 보내는 연락처 양식과 PHP 스크립트를 작성했지만 메시지를 보내면 새 페이지가 다시로드됩니다. 나는 메시지가 대신 새 페이지

쉽게 jQuery를 함께 할 수있는 모든 방법으로가는 보낼 때 사용자에게 메시지를 표시하기 위해 Ajax를 사용하고자하는

?

내 양식 :

 <form id="cont-form" method="post" action="mail.php"> 
    <fieldset> 
    <legend>Send me a message</legend> 
    <ol> 
     <li> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" placeholder="First and last name" required> 
     </li> 
     <li> 
     <label for="email">Email</label> 
     <input id="email" name="email" type="email" placeholder="example@domain.com" required> 
     </li> 
     <li> 
     <label for="phone">Phone</label> 
     <input id="phone" name="phone" type="tel" placeholder="Eg. 07500000000" required> 
     </li> 
     <li> 
     <label for="subject">Subject</label> 
     <input id="subject" name="subject" type="text" placeholder="Eg. Enquiry" required> 
     </li> 
     <li> 
     <label for="message">Message</label> 
     <textarea id="message" name="message" placeholder="Insert your message or question" rows="10" cols="50"></textarea> 
     </li> 
     <li> 
     <label for="human">Enter the number 4 if you're human</label> 
     <input id="human" name="human" type="text" placeholder="Are you human?" required> 
     </li> 
    </ol> 
    </fieldset> 
    <fieldset> 
    <input class="button" id="submit" name="submit" type="submit" value="Send it!"> 
    </fieldset> 
</form> 

내 PHP 스크립트 :

<?php 
    $name = $_POST['name']; //'name' has to be the same as the name value on the form input element 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    $human = $_POST['human']; 
    $from = $_POST['email']; 
    $to = 'ben_humphries@hotmail.co.uk'; //set to the default email address 
    $subject = $_POST['subject']; 
    $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 

    $headers = "From: $email" . "\r\n" . 
    "Reply-To: $email" . "\r\n" . 
    "X-Mailer: PHP/" . phpversion(); 

    if(isset($_POST['submit']) && ($_POST['human']) == '4') {    
    mail ($to, $subject, $body, $headers); //mail sends it to the SMTP server side which sends the email 
    echo "<p>Your message has been sent!</p>"; 
    } 

    else { 
    echo "<p>Something went wrong, go back and try again!</p>"; 
    } 
    if (!isset($_POST['submit']) && ($_POST['human']) != '4') { 
    echo "<p>You answered the anti-spam question incorrectly!</p>"; 
    } 
    ?> 

Answer 1

넵.

<button class="button" id="submit" name="submit">Send it!</button> 

당신이 중 하나를 HTML에 온 클릭을 설정할 수는 AJAX 호출을 수행하는 JQuery와/자바 스크립트 함수를 호출하므로,

1 변경 제출 버튼 : 당신은 몇 가지 작업을 수행해야 또는 JQuery와에 클릭 이벤트를 바인딩 :

$(document).ready(function(){ //this is executed when the document is fully loaded 
    $("#submit").click(function(){ 
     $.post("mail.php", $("#cont-form").serialize(), function(data){ 
       //this is a callback function, when the AJAX calls ends anything 
       //echoed by mail.php goes into the data variable it receives. 
       alert(data); 
     }); 
    }); 
}); 

2 변경 mail.php 당신이 alert() 할 메시지를 에코. 귀하의 경우 이미 작동 할 수 있습니다. HTML 코드를 반환하는 경우 alert() 대신 div 안에 표시하는 것이 더 나을 수도 있습니다.