Question

我的网站上有一个表单，可以推送到我的电子邮件地址。在我写一个ajax函数之前，表单会成功地推送到我的电子邮件地址。唯一的问题是，当用户填写表单时，它会在提交表单时将其带到另一页。我的表单的HTML如下所示。

            <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="submit" name="submit" id="submit" value="Send Message" />
            </form>
        </div><!-- /end #contact-form -->

我写的ajax电话是......

$("#submit").on('click', function(){
var formData = $('#contact').serialize();
$.ajax({
    type:"POST",
    data:"formData",
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
   });
});

我的javaScript控制台没有显示任何错误，所以我认为问题出在我的jQuery逻辑上。在我点击提交时在Chrome上，我被重定向到我的主页。在Firefox上，表单提交但我被重定向到另一个页面，因此它完全忽略了我的AJAX调用。有AJAX经验的人可以告诉我我做错了什么吗？如果呼叫失败，我也希望附上一条消息。我可以添加'失败：'并为价值提供一个函数就像我成功一样吗？

Answer 1

你有两个问题

您的表单正常提交
您试图发布错误的数据

要阻止表单提交，您可以从jQuery单击处理程序返回false或从事件对象调用preventDefault。
您正在发送字符串"formData"作为表单数据而不是formData变量中的字符串

$("#submit").on('click', function(event){
  var formData = $('#contact').serialize();
  $.ajax({
    type:"POST",
    data:formData,
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
  });
  event.preventDefault();
  // or
  return false;
});

Answer 2

即使您有AJAX调用，也很有可能正常表单提交操作仍在进行中。一个简单的解决方法可能是简单地将按钮类型从submit更改为button。这样你的点击处理程序仍然可以工作，但它不会执行自己提交表单的默认操作。

<input type="button" name="submit" id="submit" value="Send Message" />

我的.ajax电话无效

2 个答案: