在Web前端开发中,经常需要用ajax从后台获取动态数据,因此<script></script>不能写死,而要动态加载js。
问题描述:实习期间在做一个需求的过程中碰到需要从后台动态加入js的问题。
首先,我给出的解决方案是:
<script class="url1">
$.ajax({
type: "GET",
data: {captchaType:1},
url: "url_demo",
dataType: "jsonp",
jsonp: "callback",
success: function(json) {
if(json.code == 0){
url_1 = json.url;
$(".url1").attr("src",url_1);
}
},
error: function() {
}
});
</script>
其中向url_demo发送http请求,返回一个json串,其中包括我们想要的url,这里的url是一段js,获取url后赋值给<script>的src属性。
这里存在的问题是:获取到的url虽然成功赋给了src属性,但js脚本并未将资源加载,导致出错。分析了下,发现是因为只要在<script>...</script>内部嵌入了一段脚本之后,就不能修改其属性值了。因此不能采取上述方法来动态加载js。
解决方案可修改为:
<script class="url1"></script>
<script>
$.ajax({
type: "GET",
data: {captchaType:1},
url: "url_demo",
dataType: "jsonp",
jsonp: "callback",
success: function(json) {
if(json.code == 0){
url_1 = json.url;
$(".url1").attr("src",url_1);
}
},
error: function() {
}
});
</script>
也就是单独拎一个<script></script>,里面不加任何js代码,然后用另外的<script></script>编写js脚本前一个<script></script>的src属性进行修改,达到页面动态加入js的要求。
后来导师说上面的做法有点low,而且“极具创造力”(不过发现了一个问题然后解决了,还是不错滴),就要我去找loadjs的常规方法,这里借用一下玉伯seajs里的loadJs方法,学习一下大神的写法:
function loadJs(url , callback){
var node = document.createElement("script");
node[window.addEventListener ? "onload":"onreadystatechange"] = function(){
if(window.addEventListener || /loaded|complete/i.test(node.readyState)){
callback();
node.onreadystatechange = null;
}
}
node.onerror = function(){};
node.src = url;
var head = document.getElementsByTagName("head")[0];
head.insertBefore(node,head.firstChild);
}
用法如下:
$(function(){
$.ajax({
type: "GET",
data: {captchaType:1},
url: "demo_url",
dataType: "jsonp",
jsonp: "callback"
}).done(function(json){
if (json.code == 0) {
//参数url和回调函数
loadJs(json.url, fCb);
}
});
function fCb(){
//回调函数,第一次需要用到上述url对应js脚本的函数
init("container1", "point");
}
})
好啦,还是看的、学的太少了,以后要多看大牛的写法,只有看得多了,才能不会一头钻进死胡同里。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。