Question

我做了一个简单的基于php和jquery的程序。在其中打开页面的情况下，我想先显示所有类别数据，然后选择“全部”。然后，当通过下拉菜单更改类别时，将根据所选类别显示数据。但是使用jQuery的这种更改功能该怎么做。

两个文件：
index.php文件

<?php
    $db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
    mysql_select_db('myproject', $db) or die("Could not select database");
    $result = mysql_query("SELECT * from category");
?>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
            $(document).ready(function(){
                $("#select_category").change(function(){
                    var catid  = $("#select_category option:selected").val();
                    $.ajax({
                       type : "post",
                       url : "product.php",
                       data: { id:catid },
                       success: function (response) {
                                var getres = $.parseJSON(response);
                                var results = "";
                                results += "<table border='1'>";
                                results += "<tr>"+
                                                "<th>Product Name</th>"+
                                                "<th>Category</th>"+ 
                                                "<th>Publish</th>"+
                                            "</tr>";

                                    $.each(getres.data , function (key,value){
                                            results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
                                    });
                                    results+= "</table>";
                                    $(".result-container").html(results);
                            }
                    });
                });
            });

    </script>
</head>
<body>
    <select name="cat" id="select_category">
        <option value="0">--All--</option>
        <?php  
        while ($row = mysql_fetch_array($result)) { ?>  
            <option value="<?php echo $row['cat_id'] ?>"><?php echo $row['cat_name'] ?></option>
        <?php } ?>
    </select><br><br><br>
    <div class="result-container">
    </div>
   </body>
</html>

product.php文件

$db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$cat_id = $_POST['id'];
     $query = "SELECT p.name AS product_name,CASE WHEN p.publish='yes' THEN '+' ELSE '-' END AS publish,c.cat_name AS categoryFROM product p LEFT JOIN category c ON c.cat_id = p.category";
    if(!empty($cat_id)){
        $query = $query. 'WHERE p.category='.$cat_id;
    }
    $sql = mysql_query($query);
    $rows = array();
    while($r = mysql_fetch_assoc($sql)) {
      $rows[] = $r;
    }
    $result=array('data'=>$rows);
    echo json_encode($result);

Answer 1

您可以通过在页面加载时调用相同的Ajax代码（类别ID为空）来实现。

<?php
    $db = mysql_connect('localhost', 'root', 'testing') or die("Could not connect database");
    mysql_select_db('myproject', $db) or die("Could not select database");
    $result = mysql_query("SELECT * from category");
?>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function ajaxCall(catid = '') {
                $.ajax({
                    type: "post",
                    url: "product.php",
                    data: { id: catid },
                    success: function(response) {
                        var getres = $.parseJSON(response);
                        var results = "";
                        results += "<table border='1'>";
                        results += "<tr>" +
                            "<th>Product Name</th>" +
                            "<th>Category</th>" +
                            "<th>Publish</th>" +
                        "</tr>";

                        $.each(getres.data, function(key, value) {
                            results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
                        });
                        results += "</table>";
                        $(".result-container").html(results);
                    }
                });
            }
            $(document).ready(function() {
                ajaxCall();
                $("#select_category").change(function() {
                    var catid = $("#select_category option:selected").val();
                    ajaxCall(catid);
                });
            });
        </script>
    </head>

    <body>
        <select name="cat" id="select_category">
            <option value="0">--All--</option>
            <?php
              while ($row = mysql_fetch_array($result)) {?>
                <option value="<?php echo $row['cat_id']; ?>">
                    <?php echo $row['cat_name']; ?>
                </option>
                <?php } ?>
        </select>
        <br>
        <br>
        <br>
        <div class="result-container"></div>
    </body>
    </html>

我想显示所有数据，并且在选择下拉列表后，jquery和php中的数据将发生变化

1 个答案: