jQuery从3.3.1-min升级至3.5.1后表单无法正常运行问题求助

问题原因 #

你的问题是jQuery版本兼容性导致的，jQuery 3.5.0版本开始修复了严重的XSS安全漏洞，调整了HTML字符串解析、属性读取、AJAX响应解析的逻辑，和3.3.1版本存在不兼容的写法，所以你原有适配3.3.1的代码在3.5.1下无法运行。同时加载两个jQuery版本会导致Bootstrap绑定的jQuery实例和表单代码调用的实例不一致，必然会引发Bootstrap功能异常。

解决步骤 #

1. 页面仅保留jQuery 3.5.1的引入，删除3.3.1版本的引入，彻底避免版本冲突。
2. 修改原有表单代码中不兼容3.5.x的写法，优化点如下：

• 增加AJAX请求的dataType配置，明确指定响应为JSON格式，避免解析异常
• 优化表单参数收集逻辑，跳过无name属性的表单控件，避免生成无效键值
• 优化DOM创建写法，适配3.5.x的HTML解析规则

修改后完整代码 #

// Contact form
var form = $('#main-contact-form');
var button = $('.btn-flat');
form.submit(function(event){
    event.preventDefault();
    // 优化DOM创建写法适配3.5.x解析规则
    var form_status = $('<div>', {
        class: 'form_status'
    });
    var data_to_send = {};
    $("form .col-sm-12").each(function(){
        const formControl = $(this).find(".form-control");
        const fieldName = formControl.attr("name");
        // 跳过没有name属性的表单控件，避免生成无效参数
        if (fieldName) {
            data_to_send[fieldName] = formControl.val();
        }
    });

    $.ajax({
        url: $(this).attr('action'),
        method: "POST",
        data: data_to_send,
        // 明确指定响应为JSON格式，避免3.5.x默认解析异常
        dataType: 'json',
        beforeSend: function(){
            form.prepend( form_status.html('<p style="padding:10px;"><i class="fa fa-spinner fa-spin"></i> Sending ...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">' + data.message + '</p>');
        if(data.type=="success"){
            $(button).hide(500);
            $("form .col-sm-12").hide(500);
        }
    });
});

修改后清除浏览器缓存重新加载页面，打开浏览器开发者工具的控制台查看是否有报错，测试表单提交功能即可正常使用。

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