同个页面使用多个版本的JQuery不产生冲突解决方案
程序员文章站
2022-03-07 12:43:48
同个页面使用多个版本的JQuery不产生冲突解决方案产生问题的原因：前端使用LigerUI框架时用到了Grid（数据表格）组件，表格内展示的数据都是车辆信息。现有需求就是每台车都要上传其相关的车辆照片或者档案文件，因此我们就需要一个上传文件的功能，我使用的方式是异步上传。产生问题的场景：于是我就按照以往的方式使用$.ajax(…);来上传文件了，等一切都编写完成后我迫不及待的进行了测试，可结果跟预期完全不一样甚至控制台还出现了报错信息（TypeError: M.data.match is n...
同个页面使用多个版本的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() {
......
});
});
本文地址：https://blog.csdn.net/weixin_44854779/article/details/109580009