javascript XMLHttpRequest 打开 php 文件并执行更多 javascript

Question

我有一个主页，称之为 Main.php。在此页面上有一个按钮，单击该按钮后，将使用 Results.php 中的结果设置 div 的 innerHTML（已在 Main.php 上，称为 divResults）。

当调用 Results.php 时，返回的 HTML“These Are The Results”被正确接收并设置为 Main.php 上 divResults 的内容。但是，不会执行 Results.php 中的任何 javascript。作为一个例子，我尝试做一个简单的 window.alert。以下是示例代码：

Main.php 链接按钮开始操作：

<img src="$MyImageSource" onclick=\"ExpandDropdownDiv()\" />

Main.php javascript 函数 ExpandDropdownDiv():

function ExpandDropdownDiv(){

    if (window.XMLHttpRequest)/* code for IE7+, Firefox, Chrome, Opera, Safari */
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {/* code for IE6, IE5 */
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","Results.php",true);
    xmlhttp.send();

}

Results.php 代码示例：

<script type="text/javascript">
    alert("Success");
</script>
These Are The Results

----------------- - 编辑 - 更新 ------------------

Results.php 中的简单警报只是一个示例。如果我能够做到这一点，我相信我可以自己解决剩下的问题。然而，我注意到一些评论建议在我设置 div 的 innerHTML 后将警报放置在 Main.php 的 javascript 中。那么，让我解释一下在设置 div 后我真正想用 javascript 做什么。

图像 1 显示了一些正常的“选择”html 元素，这些元素已使用 jquery 和下拉检查列表扩展名 (.js) 进行了转换。当用户单击底部的彩色向下箭头时，div 会展开，（图像 2） 并在另一个 .php 文件中生成另外两个“Select”元素...返回 html，并放置在div中。因此，我不需要重新加载整个页面，并且可以将新的选择下拉列表放置在现有的下拉列表下方。

问题是，为了“转换”这些正常的选择元素，需要针对该 HTML 执行一些 javascript：

$(document).ready(function() {
     $(".MultiSelect").dropdownchecklist(  {firstItemChecksAll: true, maxDropHeight: 300 , searchTextbox: true, width: 100, textFormatFunction: function(options) {
        var selectedOptions = options.filter(":selected");
        var countOfSelected = selectedOptions.size();
        var size = options.size();
        switch(countOfSelected) {
        case 0: return "All";
        case 1: return selectedOptions.text();
/*      case size: return "All"; */
        default: return countOfSelected + " selected";
        }
    } 
    }
    ); 
}

因此，我需要能够针对从另一个 .php 文件生成的 HTML 执行 javascript。只需调用上面的代码，在填充我的 divs innerHTML 后，只会重新生成已经存在的下拉列表，而不是两个新的下拉列表。

示例图像

Answer 1

这是了解您在做什么的好读物： Eval 嵌入 JavaScript Ajax：YUI 风格

使用 eval() 让您的代码正常工作；但由于各种原因不推荐：

让我们像这样修改你的 php：

<script type="text/javascript">
    function result() {
        alert("Success");
    }
</script>
These Are The Results

这是来自 AJAX 的回调函数。结果（）;没有被执行，因为它没有被评估，因此不存在。在您的情况下，

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            result(); // this function is embedded in the responseText
                      // and doesn't get evaluated. I.e. it doesn't exist
}

为了让浏览器识别 result();，您必须对脚本标记中的所有 JavaScript 语句执行 eval();你用id divResults注入div：

if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
        {
            document.getElementById("divResults").innerHTML=xmlhttp.responseText;
            var myDiv = document.getElementById("divResults");
            var myscripz = myDiv.getElementsByTagName('script');
            for(var i=myscripz.length; i--;){
                   eval(myscripz[i].innerHTML);
            }
            result(); //alerts success
}

简单方法：

我要做的最简单的方法基本上是从php中删除JavaScript并显示内容，然后回调后在回调函数中完成 JavaScript 的其余部分
php:

 echo 'These Are The Results';

JavaScript:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        alert('success'); // or whatever else JavaScript you need to do
    }
}

Answer 2

尝试将 Result.php 中的 javascript 代码包装在一个函数中，并在插入后调用它，如下所示

<script type="text/javascript">
    function result() {
        alert("Success");
    }
</script>
These Are The Results

：

   if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
    {
        document.getElementById("divResults").innerHTML=xmlhttp.responseText;
        if(result) result();
    }

Answer 3

您的 results.php 需要类似于...

echo 'eval("function results() { alert(\'success\'); }");';

然后调用结果函数。