如何使用 PHP 和 AJAX 在 HTML 中返回 JSON 而无需重定向？

Question

我已经搜索了很多解决方案来解决这个问题，但我还没有找到解决方案。我试图在我的网站上（使用 Bootstrap）包含一个用于发送电子邮件的表单（一个联系我们的表单）。PHP 被用于邮件模型。

问题在于发送消息时应该向用户显示的消息，该消息没有出现在分配给它的位置（#status），而是我被定向到一个包含数组数据的新页面。https://drive.google.com/file/d/1tH8cVCWpx7pDe2OyxkGSKY6rnqV9KxlL/view?usp=sharing

请注意，该消息出现在所有验证情况下（当名称或电子邮件或主题或消息字段为空时），只有在发送电子邮件时，它才会将我定向到另一个页面！https://drive.google.com/file/d/1lK11R2a18S2arExDegcZyOnITwRlIOYh/view?usp=sharing

这是我的代码：

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script> <

  script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> <

  script >

  function validateForm() {

    document.getElementById('status').innerHTML = "Sending...";

    formData = {

      'name': $('input[name=name]').val(),

      'email': $('input[name=email]').val(),

      'subject': $('input[name=subject]').val(),

      'message': $('textarea[name=message]').val()

    };

    $.ajax({

      url: "mail.php",

      type: "POST",

      data: formData,

      dataType: "json",

      success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message1);

        if (data.code) //If mail was sent successfully, reset the form.

          $('#contact-form').closest('form').find("input[type=text], textarea").val("");

      },

      error: function(jqXHR, textStatus, errorThrown) {

        $('#status').text(jqXHR);

      }

    });

  } <

  /script>

Answer 1

您遇到的问题是，form提交时的默认行为是浏览器与 HTTP 协议交互时通常看到的行为。您button的 is oftype submit并且它提交form.假设您在内部处理所有您想要的逻辑，您validateForm的代码缺少的是您的意图是防止默认行为submit：$("#contact-form").submit(function(e) {&nbsp; &nbsp; e.preventDefault();});