1

私はproductsというテーブルを持つデータベースを持っており、そのテーブルには、タイトル、アーティスト、および各製品の情報を含む他のいくつかの行があります。データベースのデータを表示する方法を学びました。また、1つのカテゴリのデータのみを表示する方法も見つけました。簡単そうですね。しかし、私はこれらすべてを、ユーザーがリストから見たいカテゴリを選択できるドロップダウンメニューと組み合わせたいと思います。どうすればこれを作ることができますか？私は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);

  ?>

そして、これが私が1つのカテゴリーからのデータだけを表示するコードです：

<?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にロードできます。phpページをトリガーしてjavascript関数を使用して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ファイル、最後にdividです。

この例のように

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 に答える