2

我已经阅读了许多允许由 AJAX 函数调用的脚本的方法，但我无法让它工作，所以如果可能的话，这个特定代码的示例会很棒，因为我对 JS 和 AJAX 相对较新。

这是请求更新内容的主要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 运行。任何建议都会很棒，或者是一个关于如何使其工作的简单示例。

4

3 回答 3

0

通过 XMLHttpRequest 加载的脚本标签将不会被评估。正如您所说，您可以朝多个方向前进。使用图像 hack 并在您进行 ajax 调用的父文件中定义您的函数。

您可以使用 eval()，但如果有另一种解决方案，没人应该这样做。

将您的脚本附加到父文档中。

或者干脆使用 JQuery，因为这可能是最简单的方法。

于 2013-05-15T08:40:04.313 回答
0

我只通过更新内部表单段解决了这个问题，所以我的索引页面上有这个，而不是在更新的文件中启动表单。虽然它不会在 ajax 调用后更新脚本，但它是一种解决方法。希望这可以帮助某人。

<form id="form">
<div id=divupdatedbyAJAX>
Ajax information is inserted here.
</div>
</form>
于 2013-05-15T15:05:19.997 回答
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 所做的那样）。这将极大地简化您的情况。

于 2013-05-15T09:45:46.950 回答