使用JS提交含文件表单失败，出现304 Not Modified错误

问题背景 #

有一个包含信息与图片上传的表单，使用JavaScript提交时无任何响应，浏览器报错「[HTTP/1.1 304 Not Modified 1ms]」。另一个逻辑完全相同的表单在其他页面可正常提交。

表单标签代码：

<form class="form-horizontal" method="post" id="form-insArtist" enctype="multipart/form-data">

测试用JS代码（连最外层的alert都未触发）：

$('#form-insArtist').on("submit", function(event){
    event.preventDefault();
    alert("Yes"); // 这个弹窗完全没触发
    /*$.ajax({
        beforeSend: function () {
            $.validator.setDefaults({
                submitHandler: function () {
                    document.getElementById("overlay-insartist").innerHTML = "<div class='overlay d-flex justify-content-center align-items-center'><i class='fas fa-2x fa-sync fa-spin'></i></div>";
                }
            });
            $('#form-insArtist').validate({
                rules: {
                    txtartistname: {
                        required: true
                    },
                    txtcountry: {
                        required: true
                    },
                    txtmail: {
                        required: true,
                        email: true
                    },
                    txtphone: {
                        number: true
                    },
                    txtcel: {
                        number: true
                    }
                },
                messages: {
                    txtartistname: {
                        required: "Insert artist name.",
                    },
                    txtcountry: {
                        required: "Insert artist country.",
                    },
                    txtmail: {
                        required: "Insert artist mail.",
                        number: "Insert a valid mail."
                    },
                    txtphone: {
                        number: "Insert valid phone number (ex. 0000 0000)"
                    },
                    txtcel: {
                        number: "Insert valid cel number (ex. 0000 0000)",
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        },
        type: 'POST',
        url: '../assets/php/insert/artist.php',
        data: new FormData(this),
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            //alert(response);
            $('#modal-insartist').modal('hide');
            toastr.success('Correct.');
            $("#gallery-artist").load(" #gallery-artist");
        },
        error: function (response) {
            toastr.danger('Uh oh, it might fail.');
        },
        complete:function(){
            document.getElementById("overlay-insartist").innerHTML = '<div></div>';
        }
    });*/
});

已尝试操作：清除浏览器缓存与历史记录、修改表单提交方式，问题依旧。

解决办法 #

• 检查事件绑定时机：alert未触发说明submit事件未成功绑定。若JS代码在DOM加载完成前执行，需将代码包裹在$(document).ready()中；若表单是动态生成的（如模态框内渲染），改用事件委托绑定：

  // DOM就绪后绑定
  $(document).ready(function(){
      $('#form-insArtist').on("submit", function(event){
          event.preventDefault();
          alert("Yes");
          // 后续代码...
      });
  });
  
  // 动态元素的事件委托
  $(document).on("submit", "#form-insArtist", function(event){
      event.preventDefault();
      alert("Yes");
      // 后续代码...
  });
  

• 排查304错误根源：POST请求理论上不会触发304，需从两方面检查：

  • 服务器端：检查artist.php的响应头，确保返回Cache-Control: no-cache, no-store, must-revalidate、Pragma: no-cache、Expires: 0等禁用缓存的头信息，避免服务器错误缓存POST请求。
  • 浏览器端：开启无痕模式测试，或在开发者工具中勾选「Disable cache」，排除浏览器插件、代理的缓存干扰。

• 检查表单元素冲突：

  • 确认页面内无重复的id="form-insArtist"，重复ID会导致JS无法正确定位元素。
  • 检查表单提交按钮的type属性：若为type="button"，需手动触发submit事件；若按钮有自定义点击事件，需确认未阻止表单默认提交行为。

• 验证脚本加载顺序：确保jQuery在所有依赖它的脚本（如jQuery Validate）之前加载，顺序错误会导致事件绑定失效或插件无法运行。同时检查浏览器控制台是否有其他JS错误（如Uncaught ReferenceError），这类错误会中断代码执行。

• 测试原生JS绑定：用原生JS替代jQuery绑定事件，排除jQuery自身问题：

  document.getElementById('form-insArtist').addEventListener('submit', function(event){
      event.preventDefault();
      alert("Yes");
  });
  

  若原生代码能触发alert，说明是jQuery加载或使用问题；若仍无响应，需检查表单是否被其他元素覆盖、是否存在disabled属性等。

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