使用jQuery v3.3的Ajax脚本在Firefox与IE中无法运行求助

你的Ajax脚本在Chrome正常但Firefox、IE失效，核心原因大概率是没有阻止表单的默认提交行为——不同浏览器对表单提交的时序处理存在差异：Chrome可能在页面刷新前完成了Ajax请求，但Firefox和IE会优先执行表单的默认提交逻辑，直接刷新页面中断Ajax请求。下面是具体的修复方案：

1. 优先阻止表单默认提交行为 #

这是解决问题的关键，你需要在表单submit事件中明确阻止浏览器的默认提交动作，有两种常用实现方式：

方式一：使用event.preventDefault() #

修改脚本，在事件处理函数中接收event参数并调用preventDefault()：

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
        // 阻止表单默认提交，避免页面刷新中断Ajax
        event.preventDefault();
        $.ajax({
            url: 'msgs.php',
            type: 'POST',
            data: { 
                newmsgs: $('#mess').val(),
                mesuser: $('#mesuser').val()
            }
        });
    });
});
</script>

方式二：在函数末尾返回false #

这是jQuery中阻止默认行为的经典写法：

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(){
        $.ajax({
            url: 'msgs.php',
            type: 'POST',
            data: { 
                newmsgs: $('#mess').val(),
                mesuser: $('#mesuser').val()
            }
        });
        // 阻止表单默认提交动作
        return false;
    });
});
</script>

2. 兼容性优化（可选但推荐） #

为了让脚本在IE等旧浏览器更稳定，建议添加以下优化：

• 显式设置cache: false：虽然POST请求默认不会被缓存，但IE偶尔会出现缓存异常，显式禁用更稳妥
• 添加错误回调：方便排查请求失败的具体原因
• 使用表单序列化：替代手动取值，避免因元素选择器错误导致的数据问题

优化后的示例代码：

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
        event.preventDefault();
        $.ajax({
            url: 'msgs.php',
            type: 'POST',
            cache: false,
            data: $(this).serialize(), // 自动序列化表单所有数据，无需手动逐个取值
            success: function(response){
                // 请求成功后的业务处理，比如更新页面消息列表
                console.log("请求成功：", response);
            },
            error: function(xhr, status, error){
                // 请求失败时打印错误信息，方便排查
                console.error("请求失败：", error);
            }
        });
    });
});
</script>

3. 故障排查步骤 #

如果修复后仍有问题，可以按以下步骤排查：

• 打开浏览器开发者工具（Firefox按F12，IE按F12或Ctrl+Shift+I），切换到控制台标签，查看是否存在JavaScript语法或执行错误
• 切换到网络标签，检查Ajax请求是否正常发送，以及返回的状态码、响应内容是否符合预期
• 确认页面中#mess和#mesuser两个元素的ID唯一且真实存在

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