<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var data = [{ "date": "1-May-10", "close": 2 }, { "date": "1-May-12", "close": 7 }];
var result = { // a mock version of our response
"javascript": ["https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js", "https://cdn.jsdelivr.net/gh/nottoobadbutgoodname/tester/chart.js"
]
}
function loadAll(resultt) { // throwaway var resultt as we are using our mock result
console.log("loading....");
getMultiScripts = function (arr) {
var _arr = $.map(arr, function (scr) {
return $.getScript(scr);
});
_arr.push($.Deferred(function (deferred) {
$(deferred.resolve);
}));
return $.when.apply($, _arr);
}
getMultiScripts(result.javascript.slice(0, -1)).done(function () {
$("<script/>", {
src: result.javascript[result.javascript.length - 1]
}).appendTo("body");
});
}
function main() {
$(document).ready(function () {
$.ajax({
url: "http://127.0.0.1:8000",
success: loadAll
});
});
}
main(); // doesn't work
//loadAll(result); // works!
</script>
运行loadAll(result)直接起作用,但是当我尝试用ajax调用时,它会静默失败。本质上,ajax调用会获取一些然后加载的.js文件。运行main将获取脚本,但似乎不执行它们(两者的状态代码均为200,但chart.js的状态代码在运行main()时显示为灰色,但在运行loadAll()时显示为黑色
编辑:
这很奇怪。由于在该示例中,我只是在嘲笑结果,所以我想尝试一下实验:
https://jsfiddle.net/rwzm4t75/4/
基本上,我将其转换为JSONP调用并获取一些随机JSONP数据,并将loadAll转换为jsonCallback函数。现在,该图表一直在加载,但是不幸的是,对于“真实世界”,无法模拟结果,并且数据以JSON而不是JSONP的形式出现。
为清楚起见,我在真实的应用程序和JSONP中尝试了JSON响应。有时会加载JSON版本,但不一致。 JSONP版本始终会加载。
答案 0 :(得分:1)
尝试在准备就绪的文档内部执行main():
$(document).ready(function () {
main();
});
function main() {
$.ajax({
url: "http://127.0.0.1:8000",
dataType: 'JSON',
})
.done(function(result)){
loadAll(result);
});
}