PHP页面表单提交报404错误，同表单HTML页面正常问题求助

我来帮你分析下这个问题：你遇到的404错误，核心原因是相对路径的解析逻辑差异——当表单放在/contact-us/子目录下的PHP页面时，AJAX里的相对路径"contact.php"会被浏览器解析为当前页面所在目录的子路径（也就是/contact-us/contact.php），但你的实际处理文件在根目录；而HTML页面如果是直接放在根目录，相对路径就会正确指向根目录的contact.php，所以能正常提交。

下面给你几个靠谱的解决方案：

方案1：直接使用根目录绝对路径 #

把AJAX代码里的url改成带斜杠的绝对路径，这样不管当前页面在哪个目录，都会直接请求根目录下的contact.php：

$(function () {
  $('#contact-form').validator();
  $('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
      // 改成带斜杠的绝对路径
      var url = "/contact.php";
      $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(),
        success: function (data) {
          var messageAlert = 'alert-' + data.type;
          var messageText = data.message;
          var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
          if (messageAlert && messageText) {
            $('#contact-form').find('.messages').html(alertBox);
            $('#contact-form')[0].reset();
          }
        }
      });
      return false;
    }
  })
});

方案2：复用表单的action属性值 #

你的表单已经设置了正确的action="contact.php"（在HTML页面正常），可以直接通过JS获取这个属性值，这样AJAX的路径会和表单默认提交路径保持一致，后期维护更方便：

$(function () {
  $('#contact-form').validator();
  $('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
      // 直接获取表单的action属性
      var url = $(this).attr('action');
      $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(),
        success: function (data) {
          var messageAlert = 'alert-' + data.type;
          var messageText = data.message;
          var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
          if (messageAlert && messageText) {
            $('#contact-form').find('.messages').html(alertBox);
            $('#contact-form')[0].reset();
          }
        }
      });
      return false;
    }
  })
});

方案3：动态获取站点根路径（适合多环境部署） #

如果你的项目需要在不同环境部署（比如本地测试、线上服务器），可以在PHP页面里输出站点根路径，再在JS里使用：
首先在PHP页面的头部添加：

<script>
// 动态获取站点根路径
var baseUrl = "<?php echo rtrim($_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']), '/'); ?>";
</script>

然后修改AJAX代码：

$(function () {
  $('#contact-form').validator();
  $('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
      var url = baseUrl + "/contact.php";
      $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(),
        success: function (data) {
          var messageAlert = 'alert-' + data.type;
          var messageText = data.message;
          var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
          if (messageAlert && messageText) {
            $('#contact-form').find('.messages').html(alertBox);
            $('#contact-form')[0].reset();
          }
        }
      });
      return false;
    }
  })
});

以上三种方案都能解决你的404问题，推荐用方案2，因为它复用了表单已有的配置，更符合代码复用的原则。

内容的提问来源于stack exchange，提问作者OGDigital