使用 PHP/SQL - 如何单击列表中的项目以显示与单击的项目关联的另一个项目列表 [重复]

Question

可能重复：
How can I refresh a detail select list when my master select changes using AJAX

我只是在一段时间后再次开始学习 PHP，在环顾四周后认为我需要使用 JS/ajax 来实现这一点，我打算在我对 PHP 更加熟悉之后了解更多。我想学习如何为我现在正在做的一些事情做到这一点。

我有一个父项目表，我将其显示为链接列表。单击父项时，我希望单击的父项的子项显示在另一个列表中。我可以使用简单的查询来显示 2 个列表，我只是不知道如何在单击时更新页面/sql 查询。

<?php require ('connection.inc.php'); ?>

<div id="lists">
    <h3>Lists</h3>
     <?php      
    $lists = mysql_query("SELECT * FROM lists") 
    or die(mysql_error());
    while($info = mysql_fetch_array( $lists )) 
    {  
    echo "<a href=\"#\">".$info['ListName']."</a><br />";
    } 
    ?>      
</div>  

<div id='listitems'>
    <h3>List <?php $parent=2; echo $parent?> Items</h3> 
     <?php
    $listitems = mysql_query("SELECT * FROM listitems WHERE parent=$parent") 
    or die(mysql_error()); 
    while($info = mysql_fetch_array( $listitems )) 
    { 
    echo $info['itemName']."<br />";
    }   
    ?>
</div>

Answer 1

除了代码问题（mysql_* == mucho deprecato），您需要检查请求是否为 AJAX 并输出列表项。

我使用 jquery 来简化 ajax 请求。

<?php
require ('connection.inc.php');

/* AJAX request */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    $query = sprintf('SELECT * FROM listitems WHERE parent=%d',
            mysql_real_escape_string($_REQUEST['parent']));
    $listitems = mysql_query($query)
            or die(mysql_error()); 
    printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
    while($info = mysql_fetch_array( $listitems )) 
    { 
        echo $info['itemName']."<br />";
    }
    exit;
}

/* Normal request */
?>

<div id="lists">
    <h3>Lists</h3>
    <?php      
    $lists = mysql_query("SELECT * FROM lists") 
            or die(mysql_error());
    while($info = mysql_fetch_array( $lists )) 
    {  
        echo "<a href=\"#\">".$info['ListName']."</a><br />";
    } 
    ?>      
</div>  

<div id='listitems'>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
jQuery(function($)){
     $('#lists').delegate('a', 'click', function(){
         $('#listitems').load(window.location.pathname, {parent: $(this).text()});
         return false;
     });
}
</script>