JavaScript函数未执行：下拉菜单触发无刷新表格显示失败

我帮你梳理了代码里的几个关键错误，这些正是导致JavaScript不执行、表格无法正常显示的核心原因：

一、JavaScript 部分的错误（main.php） #

1. 回调函数绑定语法错误
   你写了 xmlhttp.onreadystatechange=function();{，这里的分号完全破坏了回调函数的绑定逻辑——相当于给onreadystatechange赋值了一个空函数，后面的大括号变成了无关的独立代码块，所以AJAX请求完成后根本不会触发更新页面的操作。
   修正：去掉多余的分号，改成 xmlhttp.onreadystatechange=function(){

2. 请求参数传递错误
   在open方法里你传的是str（整个select元素对象），而不是选中的choice值，这样后端拿到的q参数是[object HTMLSelectElement]，完全不是你需要的用户ID。
   修正：改成 xmlhttp.open("GET","showtable.php?q="+choice,true);

二、PHP 部分的错误（showtable.php） #

1. SQL 语法错误
   你的SQL语句末尾多了一个多余的点：WHERE id=".$q."."，这会导致SQL执行失败，返回空结果。
   修正：改用PDO参数绑定（同时解决SQL注入风险），写成 WHERE id=?

2. HTML 表格结构错误
   电话号码那一行的输出顺序混乱：echo "<td>Telephone number</td>".$row['phone']."<td></td>";，这样phone的值会跑到表格单元格外面，破坏整个表格结构。
   修正：改成 echo "<td>Telephone number</td><td>".$row['phone']."</td>";

3. SQL 注入风险（重要提醒）
   直接把$_GET["q"]拼到SQL语句里是非常危险的操作，容易被攻击者利用进行SQL注入攻击，必须用PDO的参数绑定来处理用户输入。

修正后的完整代码 #

main.php #

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<script language="javascript" type="text/javascript"> 
function showCustomer(str){ 
    var choice = str.value; 
    var xmlhttp; 
    if (choice==0){ 
        document.getElementById("display").innerHTML="No person selected"; 
        return; 
    } 
    if(window.XMLHttpRequest){ 
        xmlhttp=new XMLHttpRequest(); 
    }else{ 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    // 修正：移除多余分号，正确绑定回调函数
    xmlhttp.onreadystatechange=function(){ 
        if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
            document.getElementById("display").innerHTML=xmlhttp.responseText; 
        } 
    } 
    // 修正：传递选中的ID值而非整个元素
    xmlhttp.open("GET","showtable.php?q="+choice,true); 
    xmlhttp.send(); 
} 
</script> 
<p> 
<form> 
<select name="customer" onchange="showCustomer(this)"> 
<?php 
$hostname = 'localhost'; 
$username = 'root'; 
$password = ''; 
try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=lab9",$username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'")); 
    $dbh->exec("SET CHARACTER SET UTF8"); 
} catch(PDOException $e) { 
    echo $e->getMessage(); 
} 
$stmt=$dbh->prepare("SELECT id,name FROM customers"); 
$zero=0; 
echo "<option value=".$zero.">Select person</option>"; 
$stmt->execute(); 
$result=$stmt->fetchAll(); 
foreach ($result as $row) { 
    $id = $row['id']; 
    $name = $row['name']; 
    echo "<option value=".$id.">".$name."</option>"; 
} 
?> 
</select> 
</form> 
</p> 
<p id="display"></p> 
</body> 
</html>

showtable.php #

<?php 
$q=$_GET["q"]; 
$hostname = 'localhost'; 
$username = 'root'; 
$password = ''; 
try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=lab9",$username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'")); 
    $dbh->exec("SET CHARACTER SET UTF8"); 
} catch(PDOException $e) { 
    echo $e->getMessage(); 
} 
// 修正：使用参数绑定避免SQL注入，修复语法错误
$stmt=$dbh->prepare("SELECT id,name,adress,city,tk,phone,mobile FROM customers WHERE id=?");
$stmt->execute([$q]); 
$result=$stmt->fetchAll(); 
foreach($result as $row){ 
    echo "<p>"; 
    echo "<table border='1'>"; 
    echo "<tr>"; 
    echo "<td>ID</td><td>".$row['id']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Name</td><td>".$row['name']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Adress</td><td>".$row['adress']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Town</td><td>".$row['city']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Τ.Κ.</td><td>".$row['tk']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    // 修正：修复表格单元格顺序错误
    echo "<td>Telephone number</td><td>".$row['phone']."</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Mobile</td><td>".$row['mobile']."</td>"; 
    echo "</tr>"; 
    echo "</table>"; 
    echo "</p>"; 
} 
?>

修改完成后，下拉菜单选择选项应该就能正常触发AJAX请求，后端会返回正确的表格HTML并显示在页面上了。另外一定要记住，处理用户输入时必须用参数绑定来规避SQL注入风险，这是Web开发的基础安全规范哦。

内容的提问来源于stack exchange，提问作者tomtom_theboy