Question

感谢阅读这篇文章的人！我在我的网站上有一个联系表单，我希望当用户提交时窗口不会刷新，但是尽管我使用带有POST方法的Ajax，它仍然令人耳目一新..

这是代码（html）：

                <form class="form-horizontal">
              <div class="form-group">
                <div class="col-sm-12">
                  <input type="email" class="form-control" placeholder="Email" name="email" id="email" required>
                </div>
              </div>
                <div class="form-group">
                <div class="col-sm-12">
                  <input type="text" class="form-control" placeholder="Complete name" name="name" id="name" required>
                </div>
              </div>
                <div class="form-group">
                <div class="col-sm-12">
                  <input type="text" class="form-control" placeholder="Object" name="objet" id="object" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                        <textarea rows="8" class="form-control" placeholder="Your message here ..." name="message" id="message" required></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <button type="submit" class="btn btn-custom-am" id="sending_form">Envoyer mail</button>
                </div>
              </div>
            </form>

PHP文件：

<?php
if($_POST){
  $email = $_POST['email'];
  $name = $_POST['name'];
  $object = $_POST['objet'];
  $message = $_POST['message'];

  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
  $headers .= "From: $name <$email>\r\nReply-to : $name <$email>\nX-Mailer:PHP";

  $subject="$objet";
  $destinataire="my_mail@mail.com";
  $body="$message";

  mail($destinataire,$subject,$body,$headers);
}
?>

和Ajax调用：

$('#sending_form').click(function(){
    var data = {
        email: $('#email').val(),
        name: $('#name').val(),
        objet: $('#object').val(),
        message: $('#message').val()
    };
    $.ajax({
        url: "get_mail.php",
        type: 'POST',
        data: data,
        sucess: function(msg) {
            alert('Email sent');
        }
    });
});

我希望我能给你所有必需品信息！

Answer 1

您应该阻止click事件的默认行为，即提交表单：

$('#sending_form').click(function(e){
    e.preventDefault()
    var data = {
        email: $('#email').val(),
        name: $('#name').val(),
        objet: $('#object').val(),
        message: $('#message').val()
    };
    $.ajax({
        url: "get_mail.php",
        type: 'POST',
        data: data,
        success: function(msg) {
            alert('Email sent');
        }
    });
});

节点：e参数中添加的function变量。

如果您不这样做 - 浏览器将执行的默认操作是提交表单（这是您要阻止的内容）。

Answer 2

我还有最后一个问题，你知道为什么我没有任何回复（我在提交表单时没有看到警报，那是在ajax调用的success属性中）？

似乎你拼错了'成功'，应该是：

 $.ajax({
        url: "get_mail.php",
        type: 'POST',
        data: data,
        success: function(msg) {
            alert('Email sent');
        }
    });

注意第二个'c'。

Ajax和PHP形式：窗口仍然令人耳目一新

2 个答案: