如何在 ajax 中传递 2 个参数，在 php 中调用 function？

Question

I'm creating a table variation function where users can select sizes based on their chosen color.

This is my variation table

|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

Product id is fetched based on the url.

Below is my function of selecting colour.

The user has to select the colour first after the colour is chosen, the size option value will be displayed based on the colour chosen.

But I have a problem in passing multiple parameters in my ajax call. I want to pass the product_id in my ajax call, and get the product id value then used it in my ajaxpro.php . I'm not sure how to pass the product_id value in the ajax call function.

  <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

Put $_GET['mid'] in a JavaScript variable, and then send it in the data: option.

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();
    }
});