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

Question

我有一个主页,称之为Main.php.在这个页面上,是一个按钮,当点击它时,使用Results.php的结果设置div的innerHTML(已经在Main.php上,称为divResults).

调用Results.php时,返回的HTML"这些结果"被正确接收并设置为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和dropdown-check-list扩展名(.js)进行了转换.当用户单击底部的彩色向下箭头时,div会扩展,(图像2)并在另一个.php文件中生成另外两个"选择"元素...将返回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();你必须eval();对你注入div的脚本标签中的所有JavaScript语句执行以下操作id divResults:

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并显示内容,在回调之后只需在回调函数php中执行其余的JavaScript:

 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
    }
}