同个页面使用多个版本的JQuery不产生冲突解决方案

最新推荐文章于 2024-05-03 11:47:20 发布

水星程序员

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量278

点赞数 1

分类专栏： JQuery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/weixin_44854779/article/details/109580009

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

同个页面使用多个版本的JQuery不产生冲突解决方案

产生问题的原因：

前端使用LigerUI框架时用到了Grid（数据表格）组件，表格内展示的数据都是车辆信息。现有需求就是每台车都要上传其相关的车辆照片或者档案文件，因此我们就需要一个上传文件的功能，我使用的方式是异步上传。

产生问题的场景：

于是我就按照以往的方式使用$.ajax(…);来上传文件了，等一切都编写完成后我迫不及待的进行了测试，可结果跟预期完全不一样甚至控制台还出现了报错信息（TypeError: M.data.match is not a function），说实话一时间我还真搞不明白是为什么，在网上搜了半天也试过很多种方法也都无济于事。但不知怎么的我就突然想到会不会是JQuery版本的问题（此时我用的JQuery版本是1.3.2），于是我就换了1.8.3的版本，果不其然还就是因为原先用的那个JQuery版本太低了才导致出现这个错。现在上传文件的问题是解决了但又衍生出了新的问题，就是表格突然显示不出数据了而且控制台也无任何异常信息（不知道是因为LigerUI的依赖问题还是其他的什么原因，总之我用高一点版本的JQuery就会导致这个框架产生很多问题），这下就让我很头疼了，想到的解决方案就是JQuery让渡了。也就是只让上传文件那个功能使用JQuery1.8.3的版本，其他的还都是用1.3.2。

代码示例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script>
        var $2 = $.noConflict(true);
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <!-- 其他脚本或样式的引入，略...... -->
    <script>
        $(function () {
            alert($.fn.jquery); // 1.3.2
            alert($2.fn.jquery); // 1.8.3
            
            // 此时就已经完成让渡了，$代表JQuery1.3.2，$2代表JQuery1.8.3
            
            // 数据表格初始化，略......
            
            // 上传文件关键代码
            $('#fileInput').change(function () {
                try {
                    var formData = new FormData();
                    formData.append('file', $("#fileInput")[0].files[0]);
                    formData.append('uploader', 'System Administrator.');
                    formData.append('vehicleId', '<%=vId%>');
                    
                    // 注意到这里使用的就是$2了
                    $2.ajax({
                        url: '......自己的接口?type=UploadFile',
                        type: "POST",
                        data: formData,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 0) {
                                loadgrid.reload();
                                f_alert2('success', '【' + res.data.title + '】上传成功');
                            }
                        },
                        error: function () {
                            f_alert2('error', '上传失败');
                        },
                        complete: function () {
                            $('#fileInput').val('');
                        }
                    });
                } catch (e) {
                    f_alert2('error', '系统繁忙，请稍后再试');
                }
            });
            
            // 其他代码，略......
        });
    </script>
</head>
<body>
    <!-- 页面元素，略...... -->
</body>
</html>

踩坑记录：

// input标签的type值为file时，change事件要写在页面加载完成后，否则将无法触发。
// 如果是异步上传文件，最好是每次都将该标签的value清空一下，否则可能会出现除第一次外后面几次都不会触发。
$(function() { 
    $('#inputFile').change(function() { 
        ......
    }); 
});

水星程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
同个页面使用多个版本的JQuery不产生冲突解决方案

同个页面使用多个版本的JQuery不产生冲突解决方案产生问题的原因：前端使用LigerUI框架时用到了Grid（数据表格）组件，表格内展示的数据都是车辆信息。现有需求就是每台车都要上传其相关的车辆照片或者档案文件，因此我们就需要一个上传文件的功能，我使用的方式是异步上传。产生问题的场景：于是我就按照以往的方式使用$.ajax(…);来上传文件了，等一切都编写完成后我迫不及待的进行了测试，可结果跟预期完全不一样甚至控制台还出现了报错信息（TypeError: M.data.match is n
复制链接

扫一扫