使用AJAX启动PHP而无需重新加载页面 - Using AJAX to launch PHP without reloading page

Using AJAX to launch PHP without reloading page

我有以下HTML表单:

<form class="clearfix" method="POST">
 <input name="name" type="textbox" placeholder="Name:">
 <input name="email" type="textbox" placeholder="Email:">
 <textarea name="message" placeholder="Message:"></textarea>
 <input name="submit" type="submit" id="submit" value="submit">
</form>

启动PHP脚本(可以工作)，但将用户重定向到包含PHP的空页面(即。网址是mywebpage.com/send_mail.php)。使用AJAX，我如何在后台启动PHP脚本而不重新加载页面?

我有以下AJAX请求，但它似乎不工作:

$('#submit').click(function(e) {
 e.preventDefault();
 var data = {
    name: $("#name").val(),
    email: $("#email").val(),
    message: $("#msg").val()
 };
 $.ajax({
    url: '../send_mail.php',
    type: 'POST',
    data: data,
    success: function(msg) {
        alert('Email Sent');
    }
 });
});

能告诉我为什么不工作吗?目前，它所做的(当点击提交时)是直接转到PHP页面，似乎忽略了AJAX

它正在重新加载，因为它是一个submit按钮，它被添加到form中，所以它在点击时提交表单，而不是等待AJAX提交。

你可以使用preventDefault() jQuery方法来停止页面重定向。像这样,

$('#submit').click(function(e) {
 e.preventDefault();
 var data = {
    name: $("#name").val(),
    email: $("#email").val(),
    message: $("#msg").val()
 };
 $.ajax({
    url: '../send_mail.php',
    type: 'POST',
    data: data,
    success: function(msg) {
        alert('Email Sent');
    }
 });
});

当preventDefault();方法被调用时事件不会被触发。

在.ajax().中，您还错过了指定URL的引号。

jsFiddle: https://jsfiddle.net/3Lpft17y/

使用输入类型作为按钮type = "button"而不是submit