Question

我没有正确的问题标题，但我会尽可能清楚地问我的问题。

chapter.book.name

这就是我在Db侧的两个表的样子，第二个表中的product_table ID | product_code | product name | company_id 1 | 12345 | beer cake |343434defee 2 | 12346 | vodka cake |343434deereee product_table Product_code |Quantity | price | weight 12345 | 34 |345 |0.5 12345 | 343 |600 |1.0 12345 | 4 |845 |1.5 12346 | 341 |345 |0.5是外键，而product_code和product_code是表2的复合键。

在第一个表格中，weight是主键，而ID是唯一的。

在Db端使用Mysql，在服务器端使用Php，在客户端使用JS / Jquery。

假设我必须在产品登录页面上显示这些产品。

它有两个重量变量product_code 0.5，可能会有更多。取决于相应产品的重量。

我想要实现的目的是以某种方式在着陆页上显示这些产品，当用户点击特定重量时，应显示相应重量的价格和数量。

考虑一下，第二个表的前三行如果其中任何一个的数量为零，则应该出现三个单独的按钮，应该禁用它或者不应该增加重量。

其次，如果所有权重的数量都为零，则显示售罄图像。

如何使用JS / JQUERY / HTML / PHP实现这一目标？

的问候，
BOTJr。
感谢。

Answer 1

数据库：

CREATE TABLE `product_table` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `product_code` INT NULL,
  `product_name` VARCHAR(45) NULL,
  `company_id` VARCHAR(45) NULL,
  PRIMARY KEY (`id`));

  CREATE TABLE `product_table_price` (
  `product_code` int(11) NOT NULL,
  `quantity` int(11) DEFAULT NULL,
  `price` varchar(45) DEFAULT NULL,
  `weight` varchar(45) DEFAULT NULL,
  `id` int(11) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) 


INSERT INTO `product_table` (`product_code`, `product_name`, `company_id`) VALUES ('12345', 'beer cake', '343434defee');
INSERT INTO `product_table` (`product_code`, `product_name`, `company_id`) VALUES ('12346', 'vodka cake', '343434deereee');


INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '34', '345', '0.5');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '343', '600', '1.0');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '4', '845', '1.5');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12346', '341', '345', '0.5');

db.php与数据库的连接：

<?php

$username = 'kmoshe';
$password = 'password';
$host = 'localhost';
$dbname = 'test';

$conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password
    ,
    array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_PERSISTENT => false,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ));

index.php：

<?php
require_once './db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

<div id="products">
    <?php
    // In this part of the code i'm building div's that have tag attributes that i've created with the
    // row-id, product-code, that those attributes contain the values from the db
    // i have given a class name of item, and i'm going to catch the click event on this with JQuery
    $sql = "SELECT * FROM product_table";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    while ($row = $stmt->fetch()){ ?>
        <div class="item" row-id="<?=$row['id'];?>" product-code="<?=$row['product_code']?>"><span><?= $row['product_name'];?></span></div>
   <?php } ?>
</div>



</body>
</html>

app.js：

$(document).ready( function(){

        $(document).on('click','.item', function(e) {

            let pressedRowID =$(this).attr('row-id');
            let pressedProductCode =$(this).attr('product-code');
            let fd = new FormData();

            fd.append('id', pressedRowID);
            fd.append('product_code', pressedProductCode);

            console.log(pressedRowID, pressedProductCode);

            // In this part of the code according to the pressed product-code, we are going to fetch
            // the rows from the second table, the php will return a json structure that contains the 3 rows
            // or more with the  price and the quantity.

            $.ajax({
                url: "get_buttons.php",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                complete: function (results) {
                    try {
                        let str = JSON.parse(results.responseText);
                         updateDOM(str);
                         console.log(str)
                    } catch (e) {
                        console.error(e.message);
                    }
                },
            });


        }) ;



     updateDOM = (buttons) => {

         let disabled;
         let weight;
         let buttons_dom='';
         let buttons_container = $('#buttons-container');

         for (let property in buttons) {

             if(buttons[property].hasOwnProperty('quantity') && parseInt(buttons[property]['quantity']) !== 0) {
                 disabled = '';
             } else if (buttons[property].hasOwnProperty('quantity') && parseInt(buttons[property]['quantity']) === 0) {
                 disabled = 'disabled';
             }

             if(buttons[property].hasOwnProperty('weight')) {
                 weight = buttons[property]['weight'];
             }
             buttons_dom += `<button ${disabled}>${weight}</button>`;
         }



         buttons_container.html ('');
         buttons_container.append(buttons_dom);


    };



});

get_buttons.php：

<?php
require_once 'db.php';

$product_code = $_REQUEST['product_code'];

$sql = "SELECT * FROM product_table_price where product_code=$product_code";
$stmt = $conn->prepare($sql);
$stmt->execute();

$product_items = [];
$product_item = [];

while ($row = $stmt->fetch()){
    $product_item['product_code'] = $row['product_code'];
    $product_item['quantity'] = $row['quantity'];
    $product_item['price'] = $row['price'];
    $product_item['weight'] = $row['weight'];
    $product_item['id'] = $row['id'];
    array_push($product_items, $product_item);
}

echo json_encode($product_items);

显示不同的产品变化

1 个答案:

数据库：

db.php与数据库的连接：

index.php：

app.js：

get_buttons.php：