我已经阅读了许多允许由AJAX函数调用的脚本的方法,但是我无法使其工作,所以如果可能的话,这个特定代码的例子会很棒,因为我对JS和AJAX相对较新。 / p>
这是主要的javascript(在索引页面中循环)以请求更新的内容 (让我们称之为index.php)
if (window.XMLHttpRequest)
xmlhttp2 = new XMLHttpRequest();
} else {
xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange = function () {
if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
document.getElementById("botcontain2").innerHTML = xmlhttp2.responseText;
}
}
xmlhttp2.open("GET", "chat/shownew.php?fie=" + Math.random() + "&id=" + id + "&nm=" + nm, true);
xmlhttp2.send();
}
这是它将在shownew.php文件中调用的javascript,它将挂钩到下面的表单
<script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script type="text/javascript" id="runscript">
Ext.onReady(function(){
Ext.fly('form').on('submit', function(e){
e.preventDefault();
var date = Ext.fly('date').dom.value;
var me = Ext.fly('me').dom.value;
var them = Ext.fly('them').dom.value;
var n = Ext.fly('text').dom.value;
var hi = "submit.php?me="+me+"&them="+them+"&date="+date+"&ty=ty";
Ext.Ajax.request({
url: "chat/insertchat.php?me="+me+"&them="+them+"&date="+date+"&ty=ty",
success: function(){ alert(hi); },
failure: function() { alert(hi) ; },
params: { text: n }
});
return false;
});
});
</script>
是的,它意味着在ajax(shownew.php)调用的同一个文件中挂钩这个表单
<form id="form">
<input id="date" type="hidden" name="date">
<input id="me" type="hidden" name="me">
<input id="them" type="hidden" name="them">
<input id="text" type="text" name="text">
<input type="submit">
</form>
所以,是的,目前我无法让shownew.php javascript全部运行..任何建议都会很棒,或者是一个简单的例子,说明我如何才能使它工作。
答案 0 :(得分:0)
不会评估通过XMLHttpRequest加载的脚本标记。你可以按照你的说法进入多个方向。使用图像hack并在您进行ajax调用的父文件中定义您的函数。
您可以使用eval(),但如果有其他解决方案则没有人应该使用。
将您的脚本附加到父文档中。
或者只是使用JQuery,因为这可能是最简单的方法。
答案 1 :(得分:0)
当动态加载javascript时,最简单的方法是将其作为脚本元素附加(如Ben Carey在上面的评论中所建议的那样)。这是普通javascript中的代码,而不是依赖于JQuery:
function loadJs(file) {
var head= document.getElementsByTagName('head')[0],
script=document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", file);
head.appendChild(script);
}
编辑:您可以在希望加载脚本的位置调用此函数。最好在ajax调用之前立即完成,以便两个请求可以同时运行:
loadJs('runscript2.js');
if (window.XMLHttpRequest)
...
但是,仔细看一下你的问题,仍然存在问题。在使用新表单更新dom之前,可能会加载脚本。这将阻止您的脚本工作,因为它假定dom在调用之前就在那里。您可以通过在更新dom后仅调用loadJS来解决此问题,但这会在表单运行之前导致不必要的延迟。另一种方法是更改runscript.js,使其显示为:
<script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script type="text/javascript" id="runscript">
var runscript2 = function() {
Ext.fly('form').on('submit', function(e){
...
};
</script>
然后你可以在操作dom之后调用函数runscript2(未在代码片段中显示,但可能看起来像这样)
document.getElementById('someDiv').innerHTML=xmlhttp2.responseText;
var runscript2Ready = function() {
if (typeof runscript2 === 'function') {
runscript2();
}
else {
setTimeout(runscript2Ready, 50);
}
}
runscript2Ready();
这里,在更新dom之后,我们运行一个函数,如果它已被加载则执行javascript,如果没有,则继续以50ms的间隔再次尝试,直到它有。
注意:如果我更聪明,我会在开始时说这个,但你真的需要动态加载js吗?为什么不将它包含在原始索引文件中(修改为我建议的),然后在操作dom之后调用runscript2函数。这样你就不用担心js是否已经加载了。
注意2:如果我更聪明,我会知道一些关于extJS(它看起来你正在使用),但不幸的是,我不知道。 Ext.onReady方法可能(但不太可能)执行比仅仅等待dom加载更特殊的方法。在这种情况下,我的代码将失败。更有可能的是,ExtJS具有处理尚不存在的dom元素的工具(如JQuery所做的那样)。这将极大地简化您的情况。
答案 2 :(得分:0)
我通过仅更新内部表单段来解决此问题,因此我的索引页面上有这个,而不是在更新的文件中启动表单。虽然它不是在ajax调用之后更新脚本,但它是一种解决方法。希望这有助于某人。
<form id="form">
<div id=divupdatedbyAJAX>
Ajax information is inserted here.
</div>
</form>