如何使用 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) {

    e.preventDefault();

});