Question

我有以下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

Answer 1

它正在重新加载，因为它是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（）中指定网址。

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

Answer 2

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

使用AJAX启动PHP而无需重新加载页面

2 个答案: