JavaScript的XMLHtt prequest开放的PHP文件并执行更多的JavaScript [英] javascript XMLHttpRequest open php file and execute more javascript

问题描述

我有一个主网页，称之为Main.php。在这个页面，是一个按钮，单击该按钮时，设置一个div的innerHTML（已经在Main.php，叫divResults）与Results.php的结果。

I have a main page, call it Main.php. On this page, is a button that when clicked, sets a div's innerHTML (already on Main.php, called divResults) with the results from Results.php.

当Results.php被调用，返回的HTML这些结果被正确地接收并设置为内容上Main.php divResults。但是，不执行从Results.php任何JavaScript。举个例子，我试图做一个简单的window.alert。下面是例如code：

When Results.php is called, the returned HTML "These Are The Results" is properly received and set as the contents to divResults on Main.php. However, any javascript from Results.php is not executed. As an example, I attempt to do a simple window.alert. Here is example code:

Main.php链接按钮开始行动：

Main.php link button to begin the action:

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

Main.php javascript函数ExpandDropdownDiv（）：

Main.php javascript function 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 code例如：

Results.php code example:

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

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

在简单的警告，从Results.php仅仅是一个例子。如果我能得到这个工作，我相信我可以解决我自己我的问题的其余部分。不过，我注意到了一些意见建议，只是将警报在Main.php的JavaScript后，我设置的div的innerHTML。因此，让我解释什么，我真正想要做的JavaScript，在div设置之后。

The simple alert, from Results.php is just an example. If I were able to get this to work, I believe I could solve the rest of my problem on my own. However, I noticed a few comments suggesting to just place the alert in Main.php's javascript after i set the div's innerHTML. So, let me explain what I truly want to do with the javascript, after the div is set.

图片1 ，显示了一些正常的选择HTML元素，已使用jQuery和下拉检查列表的扩展名（.js文件）转化。当用户点击了丰富多彩的向下箭头在底部，在div扩大，（图片2）和选择在此范围内的其他PHP文件生成的两个元素......在HTML返回，并放置在格。因此，我不需要重新加载整个页面，并且可以将新的选择下拉菜单正下方现有的。

Image 1, shows some normal "Select" html elements, that have been transformed using jquery and the dropdown-check-list extension (.js). When the user clicks the colorful down arrow at the bottom, the div expands, (image 2) and two more "Select" elements are generated within this other .php file... the html is returned, and placed in the div. Thus, i do not need to reload the entire page, and can place the new select dropdowns just beneath the existing ones.

现在的问题是，要改造这些正常的选择因素，有一些JavaScript必须针对该HTML执行的：

The problem is, to "transform" these normal select elements, there is some javascript that needs to be executed against that HTML:

$(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";
        }
    } 
    }
    ); 
}

所以，不知何故，我需要能够执行JavaScript靠着从这个其他的PHP文件生成的HTML。而简单地调用上述code，我的div后的innerHTML被填满，只能重新生成现有的下拉列表中，而不是两个新的。

So, somehow I need to be able to execute javascript against the HTML that is generated from this other .php file. And simply calling the above code, after my divs innerHTML is filled, only re-generates the already existing dropdowns, not the two new ones.

示例图片

推荐答案

这是一个很好看的理解你在做什么：的评估嵌入的JavaScript的Ajax：YUI风格

Here is a good read on understanding what you are doing: Eval embed JavaScript Ajax: YUI style

与使用eval让您的code的工作（）;但不推荐用于各种原因：

让我们把你的PHP和修改它是这样的：

Let's take your php and modify it like this:

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

和这是AJAX的回调函数。结果（）;不执行，因为它不得到评估，并且因此不存在。这是你的情况

and This is the callback function from AJAX. result(); is not executed because it doesn't get evaluated, and thus does not exist. which is in your case

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
}

为了让浏览器识别结果（）; 你必须做一个的eval（）; 上

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的：

The easiest way i would do it is basically remove the JavaScript from the php and display the content, and after callback just do the rest of the JavaScript within the callback function php:

 echo 'These Are The Results';

JavaScript的：

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

这篇关于JavaScript的XMLHtt prequest开放的PHP文件并执行更多的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！