Question

我正在尝试使用ajax / jQuery / php / html 发布我的表单而不重新加载页面。

当我添加e.prevent默认值时，页面不会刷新，表单也不会发布。
当我取出e.prevent默认值时，表单发布和页面刷新。

我错过了什么？

这是我的jQuery：

$('#send').click(function(e){
e.preventDefault();        
      $.ajax({
            type: 'post',
            url: 'index.php',
            data: $('form').serialize(),
            success: function () {
              $('#contactForm').fadeOut(600);
              $('#contactClick').hide().html('Thanks for the message! I&#39;ll get back to you shortly.').fadeIn(600);
              $('section#contact').height(windowHeight);
              $('html, body').animate({scrollTop:($('#contact').position().top)}, 'slow');
              }
      });
});

这是我的HTML：

<form id="myForm" action="index.php" method="post">

    <label class="col-xs-2">Name:</label>
    <input class="col-xs-12" id="name" type="text" name="name" autocomplete="off" />

    <label class="col-xs-2">Email:</label>
    <input class="col-xs-12" type="text" name="email" autocomplete="off" />

    <label class="col-xs-2">Message:</label>
    <textarea class="col-xs-12" id="message" rows="10" cols="10" autocomplete="off" name="message"></textarea>

    <input id="send" class="submit" type="submit" name="formSubmit" value="Send" />

</form>

这是我的PHP（这是我的index.php文件的顶部）：

<?php 
if($_POST['formSubmit']=="Send") {

$to = "myemail@ddress.com";
$subject = "A message from your website";

$text = " Name: ";
$text .= $_POST['name'];
$text .= "\r\n";
$text .= " E-mail: ";
$text .= $_POST['email'];
$text .= "\r\n";
$text .= " Message: ";
$text .= $_POST['message'];
$text .= "\r\n";
$wrapped_text = wordwrap($text, 120, "\r\n");
$message = htmlentities($wrapped_text);

mail($to,$subject,$message);
}
?>

Answer 1

如果您在表单中将其设为按钮而不是提交，会发生什么？

<input id="send" class="submit" type="button" name="formSubmit" value="Send" />

从表单中删除action和methods属性......以便它看起来像这样：

<form id="myForm">

删除preventDefault（）并在data参数中执行以下操作：

data: $('#myForm').serialize(),

编辑：哦，并将发送邮件的php脚本放入另一个文件（例如sendMail.php）。

希望有效：）

Answer 2

我会在发送行之前打印用于发送电子邮件的3个变量，并在ajax成功函数中的javascript put alert（data）中查看是否一切正确。

Ajax / jQuery e.preventDefault阻止页面刷新和表单提交

2 个答案: