javascript - 需要获取 PHP 脚本以在同一页面上显示结果

Question

我在这里看到了很多类似的问题，但我对 JS/AJAX/jQuery 或 PHP 的了解不够，无法理解如何将其转化为我的问题的解决方案。

我有一个联系表，它链接到contact.php 以实际发送电子邮件。它目前正在工作，但不是像我希望的那样在同一页面上显示“已发送消息”，而是将用户带到 PHP 页面。

澄清一下：我希望 PHP 回显的结果直接显示在 HTML 页面上的表单下方。

Contact.php http://pastie.org/8416873

表格 http://pastie.org/8416875

Answer 1

如果您使用 jQuery，您可以从表单中删除操作，并执行以下操作：

HTML：

<form class="contact_form" method="post" name="contact_form">

            <ul>
                <li>

                </li>
                <li>
                     <label for="name">Name:</label>
                     <input type="text" name="name" placeholder="John Doe" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="JohnDoe@Email.com" required />
                </li>
                <li>
                    <label for="message">Message:</label>
                    <textarea name="message" cols="40" rows="6" required ></textarea>
                </li>
                <li>
                    <button class="submit btn btn-default" type="submit">Send Message</button>
                </li>
            </ul>

        </form>
        <div class="targetDiv"></div>

和 javascript：

 function formSubmit(e){

     e.preventDefault(); //This will prevent the default click action.

    var frm = $('.contact_form'),
        data = JSON.stringify(frm.serializeArray());

    $.ajax({
        type: "POST",
        url: "contact.php",
        data: data,
        success: function() {
            $('.targetDiv').text('Your message has been sent!');
        },  
        error: function() {
           //your error message here
        }   
    }); 
    return false; 
   }   
}