1

我有一个数据库，其中有一个名为 products 的表，在表中我有标题、艺术家和其他一些包含每个产品信息的行。我学会了显示数据库中的数据，还找到了一种只显示一个类别的数据的方法。这听起来很容易。但我想将所有这些与一个下拉菜单结合起来，用户可以在其中从列表中选择他想要查看的类别。我怎样才能做到这一点？我认为我必须使用 javascript，但我发现的一些示例根本不涉及 javascript。

这是我显示数据库中所有数据的代码：

<?php
$con = mysql_connect("localhost","root","password");
mysql_query('SET NAMES UTF8');
if (!$con)
{
    echo "problem with connection" .mysql_error();
}
?>
<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products',$link);
while($row = mysql_fetch_array($result))
{
    $myimage = '<img src="'.$row['image'].'" />';

    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
 />" . "<p style='color:red;' >" . "myprice " . $row['price'] . "€" . "</p>". 
 '<a href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;                                       
}
mysql_close($link);

  ?>

这是我只显示一个类别的数据的代码：

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="cd"',$link);
while($row = mysql_fetch_array($result))
{
    $mycategory = $row['category'];
    $myimage = '<img src="'.$row['image'].'" />';
    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;  
}
mysql_close($link);

?>

这是我非常简单的 html 下拉菜单

<select name="singlelist" id="singlelist" size="1" >
<option value="mycd" >CD</option>
<option value="mydvd" >DVD</option>
<option value="other" >other</option>
</select>

我没有提到我想要 2 个下拉列表，用户将在其中选择子类别，但我相信如果我了解所有这些是如何工作的，我将能够使其工作。以前有没有其他人经历过这个？

ps：我使用mysql_*函数是因为它用于学校的一个项目

4

2 回答 2

1

如果你被允许使用 jquery，这个任务就很简单了。

我会有一个带有显示功能的单独的 php 页面。然后根据选择的类别，执行 onselect() 或 OnChange() 并将 php 页面加载到 div 中。

以下是如何执行此操作的示例：

HTML：

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

<select name="singlelist" id="singlelist" size="1" OnChange=$("#container").load("load.php?do=this.options[this.selectedIndex].value")>
<option value="mycd" >CD</option>
<option value="mydvd" >DVD</option>
<option value="other" >other</option>
</select>

<div id=container></div>

PHP：

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="' . $_GET['do'] . '"',$link);
while($row = mysql_fetch_array($result))
{
    $mycategory = $row['category'];
    $myimage = '<img src="'.$row['image'].'" />';
    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;  
}
mysql_close($link);

?>

当然，重要的是要注意我没有包括任何预防措施，并且代码本身极易受到 SQL 注入的攻击。您应该确保在将任何输入放入查询之前对其进行清理。

我的 jquery 也有点生疏，所以如果我错过了一些东西，希望其他人可以编辑我的答案。

于 2012-05-28T15:37:52.777 回答
1

就像 Jared 说的那样，您可以分离 php 页面并将数据加载到 div 中。您可以使用 javascript 函数触发 php 页面加载到 div 上，也可以使用 onselect() 或 onchange() 触发此函数。

我希望这个示例代码有所帮助。

HTML：

<script type="text/javascript">
    function getList(cat, url, containerid){
        var xhr=false;
        if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else {
                if (window.ActiveXObject) {
                    try {
                        page_request = new ActiveXObject("Msxml2.XMLHTTP")
                    } 
                    catch (e){
                        try {
                            page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }
                        catch (e){
                        }
                    }
                }
            }

            if (xhr) {
                var params = "?list="+cat 
                xhr.onreadystatechange = showContents;
                xhr.open("GET", url+params, true);
                xhr.send(null);
            }
            else {
                alert("Sorry, but I couldn't create an XMLHttpRequest");
            }

        function showContents(){
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var outMsg = xhr.responseText;
                }
                else {
                    var outMsg = "There was a problem with the request " + xhr.status;
                }

                document.getElementById(containerid).innerHTML=xhr.responseText;
            }

        }
    }

</script>

    <select name="singlelist" id="singlelist" size="1" onchange="getList(this.options[this.selectedIndex].value, 'php_file.php', 'container')" >
    <option value="cd" >CD</option>
    <option value="dvd" >DVD</option>
    <option value="other" >other</option>
    </select>
    <div id="container"> </div>

您应该在 getList 函数上传递 3 个参数：首先是类别，然后是 php 文件，最后是 div id。

像这个例子

onchange="getList('category', 'php_file', 'div_id')"

PHP：

<?php
  if(isset($_GET['list'])){
    mysql_select_db("myapp",$link);
    $result = mysql_query('SELECT * FROM products WHERE category="'.$_GET['list'].'"',$link);
    while($row = mysql_fetch_array($result))
    {
        $mycategory = $row['category'];
        $myimage = '<img src="'.$row['image'].'" />';
        echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
    />" . 
        "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
    href="image.php?id='.$row['id'].'">'
        . "details" . "<a>" . "</div>" ;  
    }
    mysql_close($link);  
  }
?>

我希望这有帮助。你也可以访问这个博客http://crisostomozaidem.blogspot.com/这里有一些关于 php 的有用提示。

于 2012-05-28T16:28:04.943 回答