1.问题引入
jquery版本众多,在使用jquery做项目时,由于各种原因,需要同时在一个html文件引入两个
甚至多个不同版本jquery-xxx.js文件。这篇文章记录我遇到问题,解决问题过程。
2.问题背景
我所做的web项目(以下简称项目),使用wamp环境(apache2.4.35,php5.6.38,mysql5.7.23),
在某个html文件中引入jquery-1.8.3.js文件。在本地运行项目,一切正常。但是,把项目放到远程服务器
上,然后访问,ajax(js)请求数据(请求数据类型为json)返回status:200;readyState:4;textSt-
atus:parseerror。原因 (1)php接口返回的数据不是json数据(排除:本地服务器运行ok) (2)ajax
要引用jquery,jquery解析json数据出错。【我就查看远程服务器wamp版本:(apache2.4.9,php5.5.12,
mysql5.6.17),不知道和wamp有关系不?知道的指点下,谢谢】。于是问题出来了,项目中有引入bootstrap,
有个模态框支持jquery1.9.1版本到4.0版本,而远程服务器这边解析json数据jquery1.9.1版本到4.0版本却
支持不了。这时,就需要同时在一个html文件引入两个不同版本jquery-xxx.js文件了。怎样引入呢?
4.解决问题
(1)上代码:
<script src="js/jquery-1.9.1.js"></script>
<script>
var $191 = $.noConflict(true);
</script>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var $183 = $.noConflict(true);
</script>
(2)备注: noConflict() 方法为 jQuery 变量规定新的名称
(3)解析:为不同的两个jquery文件的jQuery 变量重新命名,
A.根据我的项目,在ajax部分这样引用:
$183.ajax({
type: "POST",
xhrFields: {withCredentials: true},
crossDomain: true,
url: config.interfaceUrl
dataType: "json",
async: true,
success: function(data) {
},
error: function(req, textStatus, errorThrown) {
},
});
B.根据我的项目,在模态框部分这样引用:
$191(document).on('click','#sendBtn',function(){
console.log(this.id);
});
5.结语
在csdn写东西,就为了锻炼自己写东西的能力,给自己做笔记,也有可能帮到别人。
本文章难免有错漏百出,若有的,请大家留言斧正。
19-04-28 Jay