我有一个ajax POST请求,这个请求附带带有<script src="">
标签的html引用外部js文件,当我在DOM中插入这个html时JS没有加载,我做错了什么?我记得看到这个工作加载外部脚本1和脚本2没有问题。
请求:
$.ajax({
type: 'POST',
dataType: 'xml/html',
cache: false,
url: "/html/with/scripttags",
data: {somedata:'value'},
success: function(data) {
$('body').append(data)
}
});
加载内容:
<link rel="stylesheet" media="all" href="http://domain.com/application.css" />
<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>
<script type='text/javascript'>alert('executed')</script>
<div>BLAALBLABLAB</div>
然而,脚本标记中的警报执行没有问题,application.css
外部文件加载没有问题。看起来jQuery没有加载文件,我也检查了网络选项卡..
答案 0 :(得分:2)
这是jQuery的正常行为,如果你想要包含你的脚本,你需要解析html并手动添加它们。
坏消息:您甚至无法在script
的字符串中选择$()
个标签...
我没有测试过,但是这个快速而肮脏的例子应该有效:
function createGetScriptCallback(url) {
return function () {
return $.getScript(url);
}
}
$.ajax({
type: 'POST',
dataType: 'xml/html',
cache: false,
url: "/html/with/scripttags",
data: {
somedata: 'value'
},
success: function (data) {
var parser, doc, scriptsEl, callbacks;
parser = new DomParser();
doc = parser.parseFromString(data, "text/html")
scriptsEl = doc.querySelectorAll("script[src]");
callbacks = []
for (var i = 0; i < scriptsEl.length; i++) {
callbacks.push(createGetScriptCallback(scriptsEl[i].getAttribute("src")));
}
$.when.apply($, callbacks)
.fail(function (xhr, status, err) {
console.error(status, err);
});
$('body').append(data);
}
});
但是你不应该依赖html来加载脚本。
修改:更少脏代码(受@ guest271314&#39;答案启发)
答案 1 :(得分:0)
最简单的方法是删除
<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>
来自"/html/with/scripttags"
,然后致电
$.when($.getScript('http://domain.com/script.js')
, $.getScript('http://domain.com/script2.js'))
.fail(function(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
})
$.ajax()
success
。
另请参阅$.ajax()
dataType
多个空格分隔的值:从jQuery 1.5开始,jQuery可以转换 从Content-Type标头中收到的数据类型到什么 你需要。例如,如果您希望将文本响应视为 XML,使用“text xml”作为dataType。你也可以制作一个JSONP 请求,将其作为文本接收,并由jQuery解释为XML: “jsonp text xml”。同样,一个简写字符串,如“jsonp xml” 将首先尝试从jsonp转换为xml,如果失败, 从jsonp转换为文本,然后从text转换为xml。
"xml/html"
不是dataType