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顯示了一些普通的“ Select” html元素，這些元素已使用jquery和dropdown-check-list擴展名（.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(); 你必須做一個eval(); 在所有id divResults的div中注入的script標記中的JavaScript語句中：

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

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\'); }");';

然后調用結果函數。