如何在 ajax 中傳遞 2 個參數，在 php 中調用 function？

Question

我正在創建一個表格變體 function ，用戶可以根據他們選擇的顏色在其中 select 尺寸。

這是我的變化表

|id | product_id | product_qty | product_colour | product_size
|1  |  1         |   30        |   red          |    23
|2  |  1         |   24        |   blue         |    34
|3  |  1         |   12        |   blue         |    23
|4  |  2         |   23        |   yellow       |    12
|5  |  2         |   1         |   white        |    12

根據 url 獲取產品 ID。

下面是我選擇顏色的function。

選擇顏色后，用戶必須先輸入顏色 select，尺寸選項值將根據選擇的顏色顯示。

但是我在 ajax 調用中傳遞多個參數時遇到問題。 我想在我的 ajax 調用中傳遞 product_id，並獲取產品 id 值，然后在我的ajaxpro.php中使用它。 我不確定如何在 ajax 調用 function 中傳遞 product_id 值。

  <div class="panel-heading">Select Colour and get size</div>
      <div class="panel-body">
            <div class="form-group">
                <label for="title">Select Colour:</label>
                <select name="product_colour" class="form-control">
                    <option value="">--- Select Colour ---</option>


                    <?php
                        require('config.php');

                        $sql = $link ->prepare("SELECT DISTINCT product_colour, product_id FROM variation
                                               WHERE product_id = ? ");
                        $sql->bind_param("i", $_GET["mid"]);
                        $sql->execute();
                        $result = $sql->get_result();
                        while($row = $result->fetch_assoc()) {
        
                            $product_id = $row['product_id'];
                            
                            echo "<option value='".$row['product_colour']."'>".$row['product_colour']."</option>";      
                        }

                       
                    ?>


                </select>
            </div>

            <div class="form-group">
                <label for="title">Select Size:</label>
                <select name="product_size" class="form-control" style="width:350px">
                </select>
            </div>

<script>
$( "select[name='product_colour']" ).change(function () {
    var ColourID = $(this).val();
    

    if(ColourID) {


        $.ajax({
             url: "ajaxpro.php",
            dataType: 'Json',
            data: {'product_colour':ColourID},
            success: function(data) {
                $('select[name="product_size"]').empty();
                $.each(data, function(key, value) {
                    $('select[name="product_size"]').append('<option value="'+ key +'">'+ value +'</option>');
                });
            }
        });


    }else{
        $('select[name="product_size"]').empty();
    }
});
</script>

ajaxpro.php

<?php

   require('config.php');
   $sql= $link->prepare("SELECT * FROM variation WHERE product_id = ? AND product_colour = ? ");
   $sql->bind_param("is", $_GET['mid'], $_GET['product_colour']);
   $sql->execute();
   $result = $sql->get_result();

   $json = [];
   while($row = $result->fetch_assoc()){
        $json[$row['product_size']] = $row['product_size'];
       
   }

   echo json_encode($json);
?>

Answer 1

將$_GET['mid']放入 JavaScript 變量中，然后在data:選項中發送。

var mid = <?php echo json_encode($_GET['mid']); ?>;

$( "select[name='product_colour']" ).change(function () {
    var ColourID = $(this).val();
    if(ColourID) {
        $.ajax({
             url: "ajaxpro.php",
            dataType: 'Json',
            data: {'product_colour':ColourID, mid: mid},
            success: function(data) {
                $('select[name="product_size"]').empty();
                $.each(data, function(key, value) {
                    $('select[name="product_size"]').append('<option value="'+ key +'">'+ value +'</option>');
                });
            }
        });
    }else{
        $('select[name="product_size"]').empty();
    }
});