AJAX 响应文本在 GET 请求到 .php 后未定义

Question

我试图从 mySQL 数据库中提取设备列表，然后将其格式化为 .php 中的 html select/option 元素，然后回显 html 字符串以插入到我的主页中，但它不会将我回显的字符串返回到responseText。

这是我的 .php：

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "admin";
$dbname = "devices";
    //Connect to MySQL Server
$con=mysql_connect($dbhost, $dbuser, $dbpass);
    //Select Database
mysql_select_db($dbname) or die(mysql_error());

$sql="SELECT DISTINCT device_name FROM device_graphs";
$result=mysql_query($sql, $con);

$responsetxt="Hello all :)";
$counter=0;
while($row = mysql_fetch_array($result))
{
    $responsetxt .= "<option value=$counter>$row[0]</option>";
    $counter++;
}

echo $responsetxt;

?>

我正在尝试根据数据库中列出的设备生成设备名称的下拉列表。当我在浏览器中打开 .php 文件时，它会正确回显。

function deviceDropdown(monNum, insideHTML)
{
var ajaxRequest;  // The variable that makes Ajax possible! 
try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        alert(ajaxRequest.responseText);
        ajaxresponse = ajaxRequest.responseText;
        alert(ajaxresponse);
        deviceDropdown_pt2(monNum, ajaxresponse, insideHTML);
    }
}
ajaxRequest.open("GET", "device_list.php", true);
ajaxRequest.send(null); 
}

每次我尝试这样做时，ajaxresponse 都是未定义的；它只是弹出 2 个空的 javascript 警报框。如果我在浏览器中只运行 .php，我会得到正确的输出回显到我的窗口，所以我不认为这是 php 的问题，除非通过 php 通过 ajax 传递 html 时出现问题。

这是下拉代码的其余部分：

function deviceDropdown_pt2(monNum, ajaxresponse, insideHTML)
{
//Sets the action to occur when a selection is made in the device dropdown, 
//  in this case the properties dropdown menu
insideHTML=insideHTML + "<select onchange='propertiesDropdown(this.options[this.selectedIndex].value, " +  monNum + ")'>";  
insideHTML=insideHTML + "<option value=\"-1\">-Select a Device-</option>";
insideHTML = insideHTML + ajaxresponse; 
insideHTML=insideHTML + "</select>";
}

我的主 .js 具有以下定义的 var iframe=document.getElementById("bdy"); 和：

insideHTML="<table id=\"dashboard\" align=\"left\" valign=\"top\" border=\"0\">";
insideHTML=insideHTML + "<tr>";
insideHTML=insideHTML + "<td id=\"menu1\" width=\"800\">";
deviceDropdown("1", insideHTML);
insideHTML=insideHTML + "</td></tr>"; 
iframe.innerHTML=insideHTML;

Answer 1

您应该使用 http://jquery.com/

简单示例来实现您想要实现的目标：

$.get('ajax/test.html', function(data) {
    $('.result').html(data);
    alert('Load was performed.');
});

以及您所要做的一切是将其包含在您的标头中：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script