如何從 php 和 javascript 的數據庫中獲取價格

Question

我是 PHP 和 javascript 的新手，我正在創建一個訂單表單，其中包含我想要的四個字段客戶、產品、價格和數量。 當我 select 一個產品時，如果他已經存在，它將獲得所選客戶的最后一個訂單價格。 如果新客戶則從 product_list 表中獲取價格。 這是我的代碼。

<?php 

$conn= new mysqli('localhost','root','','pharmacy_db')or die("Could not connect to 
mysql".mysqli_error($con));?>

                <label>Customer</label>
                <div>   <select name="customer_id" id="" class="js-example-basic-single" style="width:40%" >
                    <option value="0" selected="">Guest</option>
                    <?php 
                            $customer = $conn->query("SELECT * FROM customer_list order by name asc");
                            while($row=$customer->fetch_assoc()):
                        ?>
                            <option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
                            <?php endwhile; ?>
                            </select>
                  </div>            

                        <div><select name="" id="product" class="js-example-basic-single" style="width:85%">
                                    <option value=""></option>
                                <?php 
                                $product = $conn->query("SELECT * FROM product_list  order by name asc");
                                while($row=$product->fetch_assoc()):
                                    $prod[$row['id']] = $row;
                                ?>
                                    <option value="<?php echo $row['id'] ?>" data-name="<?php echo $row['name'] ?>" data-measurement="<?php echo $row['measurement'] ?>" data-description="<?php echo $row['description'] ?>" data-price="<?php echo $row['price'] ?>"><?php echo $row['name']?></option>
                                <?php endwhile; ?>
                                </select>
                            
                                </div>
                                <div><input type="number"  step="any" id="qty" ></div>
                                <div><input type="number"  step="any" id="price" ></div>
                                <div><input type="number"  step="any" id="amount" ></div>
                                
                                <div><button class="btn btn-block btn-sm btn-primary" type="button" id="add_list"><i class="fa fa-plus"></i> Add</button></td>
                                
  
  
<script>
  $(document).ready(function() {
$('.js-example-basic-single').select2();
 });

Answer 1

好吧，一開始我不知道你的客戶和產品列表模式表，所以我只是用你的代碼中的信息創建表order ，我認為你需要避免 mysql 中已經存在 function 的命名表，所以我將表order重命名為order_list ，架構會喜歡這張表customer_list

CREATE TABLE `customer_list` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `customer_list`
  ADD PRIMARY KEY (`id`);

INSERT INTO `customer_list` (`id`, `name`) VALUES
(1, 'Customer A'),
(2, 'Customer B');  

表product_list

CREATE TABLE `product_list` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `measurement` varchar(255) NOT NULL,
  `description` varchar(255) NOT NULL,
  `price` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `product_list`
  ADD PRIMARY KEY (`id`);

INSERT INTO `product_list` (`id`, `name`, `measurement`, `description`, `price`) VALUES
(1, 'Product 1', '-', '-', 100),
(2, 'Product 2', '-', '-', 50);

表order_list

CREATE TABLE `order_list` (
`id` int(11) NOT NULL,
`customer_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`qty` int(11) NOT NULL,
`price` int(11) NOT NULL,
`amount` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `order_list`
ADD PRIMARY KEY (`id`);

INSERT INTO `order_list` (`id`, `customer_id`, `product_id`, `qty`, `price`, `amount`) VALUES
(1, 1, 1, 5, 100, 500),
(2, 1, 1, 3, 100, 300),
(3, 1, 2, 2, 50, 100);

我創建了 2 個文件，第一個是 form.php，它包含您創建的代碼並添加javascript以從表order_list中獲取最后一個訂單客戶，其中包含 ajax。 代碼會這樣

<?php 
$conn = new mysqli('localhost','root','','test_db');
?>

    <label>Customer</label>
        <div>   
            <select name="customer_id" id="customer_id" class="js-example-basic-single" style="width:40%" >
                <option value="0" selected="">Guest</option>
                <?php 
                    $customer = $conn->query("SELECT * FROM customer_list order by name asc");
                    while($row=$customer->fetch_assoc()):
                ?>
                    <option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
                <?php endwhile; ?>
            </select>
        </div>            

        <div>
            <select name="product" id="product" class="js-example-basic-single" style="width:85%">
                <option value=""></option>
                <?php 
                    $product = $conn->query("SELECT * FROM product_list  order by name asc");
                    while($row=$product->fetch_assoc()):
                        $prod[$row['id']] = $row;
                ?>
                <option value="<?php echo $row['id'] ?>" data-name="<?php echo $row['name'] ?>" data-measurement="<?php echo $row['measurement'] ?>" data-description="<?php echo $row['description'] ?>" data-price="<?php echo $row['price'] ?>"><?php echo $row['name']?></option>
                <?php endwhile; ?>
            </select>
        </div>
        
        <div>
            <input type="number"  step="any" id="qty" value="">
        </div>
        <div>
            <input type="number"  step="any" id="price" value="">
        </div>
        <div>
            <input type="number"  step="any" id="amount" value="">
        </div>                       
        <div>
            <button class="btn btn-block btn-sm btn-primary" type="button" id="add_list"><i class="fa fa-plus"></i> Add</button>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $("#product,#customer_id").change(function(){
        var customer_id = $('#customer_id').val();
        var product_id =  $('#product').val();
        var price = $('#product').find(':selected').attr('data-price')

        $.ajax({
                type: "get",
                url: 'getorder.php',
                data: {customer_id:customer_id,product_id:product_id},
                success: function(response){
                    data =  JSON.parse(response);
                    if(data!=null){
                        $('#qty').val(data.qty);
                        $('#price').val(data.price);
                        $('#amount').val(data.amount);
                    }else{
                        $('#qty').val('');
                        $('#price').val(price);
                        $('#amount').val('');
                    }
                }
            });
    });

    $("#qty,#price").change(function(){
            var qty =    $('#qty').val();
            var price =  $('#price').val();
            var amount = qty * price;
            $('#amount').val(amount);
    });

</script>

當 id product和customer_id在 select 選項更改時，function 將被觸發，首先它的 3 var， customer_id ， product_id和price它將從所選選項customer_id和product和var price中保存data-price product 。 我使用 ajax 從order_list獲取最后一個數據，它將var customer_id,product_id發送到第二種形式getorder.php

getorder.php會喜歡這個

<?php 
$conn = new mysqli('localhost','root','','test_db');

$query = "SELECT * FROM order_list WHERE customer_id='".$_GET['customer_id']."' AND product_id='".$_GET['product_id']."' ORDER BY id DESC LIMIT 1";

$result = $conn->query($query);
$row =  $result->fetch_assoc();

echo json_encode($row);
?>

that code above is for get the last data from table order_list and the result will parse to json, at the ajax if succes get data success: function(response) it will check if the response null or not, if null the input field qty and amount將為空， price輸入字段值填充var price ，如果響應不是 null 數據輸入字段將填充您獲得的數據。 在 function $("#qty,#price").change(function(){}); 當輸入字段qty或price的數據發生變化時，它將計算輸入字段amount