如何告诉ajax获取所选数据并从获取的数据库中检索数据到所选数据

时间:2018-04-03 20:34:32

标签: javascript php jquery ajax mysqli

我有2个选择框。第一个是选择品牌,第二个是选择产品。我想要的是第二个选择框从数据库中获取与第一个选择框具有相同brand_name的数据。我对AJAX没有任何线索。我从朋友那里得到了这个剧本,但它不起作用...... 我的数据库是什么样的:

“品牌”数据库:

brand_id | brand_name
    1    | ADIDAS
    2    | NIKE

这是我的“产品”数据库:

product_id | brand_name | product_name | product_image | amount | sell | buy
     1     |   ADIDAS   |    T-Shirt   |     none      |   50   |  30  | 28
     2     |   NIKE     |    Shoes     |     none      |   20   |  130 | 120

这是我的代码:

<!DOCTYPE html>
<html>
<head>
  <title>TEST | INDEX</title>
  <meta charset="utf-8" lang="en">
  <script src="ajax.js"></script>
</head>
<body>
  <select required="required" name="brand_name">
    <option disabled selected>----SELECT----</option>
    <?php 
      require_once 'connections/dbc.php';
      $query = "SELECT `brand_name` FROM `brands`";
      $response = @mysqli_query($conn, $query);
      if (!$response) {
        $_SESSION['errortitle'] ='Error loading the brands';
        $_SESSION['errormessage'] = 'Something wrong happend while loading the brands.<br/>Please contact The developer';
        header("location: error.php");
        exit();
      } else {
        while($row = mysqli_fetch_array($response)){
          echo '<option value='.$row['brand_name'].'>'.$row['brand_name'].'</option>';
        }
      }
    ?>
  </select>
<select required="required" name="product_name" disabled>
  <option disabled selected >SELECT</option>
    <?php

    ?>
</select>
<script>
    $('[name = "brand_name"]').change(function(event){
        var brand_name = $(this).val();
       $.get( 
          "action/ajax.php",
          { brand_name: brand_name },
          function(data) {
            var opts = $.parseJSON(data);
                $.each(opts, function(i, d) {
                    $('[name="product_name"]').append($('<option>', {
                        value: d.product_name,
                        text : d.product_name
                    }));
                });
                //Enable the product_name select box
                $('[name="product_name"]').prop('disabled', false);
                //Refresh the product_name select box
                $('[name="product_name"]').selectpicker('refresh');
          }
       );
    });
</script>

</body>
</html>

这是ajax.php代码:

<?php
    require_once '../connections/dbc.php';

    $getBrandName = $_REQUEST['brand_name']; // This is the id of the selected brand name
    $query = "SELECT 'product_name' FROM `product` WHERE brand_name = '$getBrandName' ";
    $response = @mysqli_query($conn, $query);
    if (!$response) {
        echo "Error loading the prouducts";
        echo 'Something wrong happend while loading the proudcts.<br/>Please contact The developer';
        exit();
    } else {
          while($row = mysqli_fetch_array($response)){
            $productsArray[]['name'] = $row['product_name'];
        }
        echo json_encode($brandName);
    }
 ?>

1 个答案:

答案 0 :(得分:0)

试试这个:

<?php
require_once 'connections/dbc.php';

// Get our brands
$query = "SELECT `brand_name` FROM `brands`";
$response = @mysqli_query($conn, $query);
if (!$response) {
    $_SESSION['errortitle'] = 'Error loading the brands';
    $_SESSION['errormessage'] = 'Something wrong happend while loading the brands.<br/>Please contact The developer';
    header("location: error.php");
    exit();
} else {
    $brands = mysqli_fetch_array($response);
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>TEST | INDEX</title>
    <meta charset="utf-8" lang="en">
    <script>
        $(document).ready(function () {
            $('[name = "brand_name"]').change(function (event) {
                var brand_name = $(this).val();
                $.get(
                    "action/ajax.php",
                    {brand_name: brand_name},
                    function (data) {
                        var opts = JSON.parse(data);
                        $.each(opts, function (i, d) {
                            $('[name="product_name"]').append('<option>', {
                                value: d.product_name,
                                text: d.product_name
                            });
                        });
                        //Enable the product_name select box
                        $('[name="product_name"]').prop('disabled', false);
                        //Refresh the product_name select box
                        $('[name="product_name"]').selectpicker('refresh');
                    }
                );
            });
        });
    </script>
</head>
<body>
<select required="required" name="brand_name">
    <option disabled selected>----SELECT----</option>
    <?php
    foreach ($brands as $row) {
        echo '<option value=' . $row['brand_name'] . '>' . $row['brand_name'] . '</option>';
    }
    ?>
</select>
<select required="required" name="product_name" disabled>
    <option disabled selected>SELECT</option>

</select>

</body>
</html>