Как использовать функцию onchange для получения данных из базы данных?

Question

Я застрял в функции onchange для получения данных из базы данных, мне нужно выбрать «Точку» в поле выбора, затем в таблице получить то, что я хочу, чтобы выбрать «Точку» в поле выбора.

Например, изображение Мне нужно выбрать данные показа «Точка» в таблице:

Затем я выбираю «Точку развлечения», чтобы получить данные:

Я просто пишу нормальное кодирование, чтобы отобразить данные в таблице:

      <div class="row">
      <div class="col-lg-12">
          <div class="box">

                <header>
                  <h5>Transaction History</h5>
                       <!-- .toolbar -->
                       <div class="toolbar">
                           <nav style="padding: 8px;">
                        <a href="javascript:;" class="btn btn- 
         default btn-xs collapse-box">
                            <i class="fa fa-minus"></i>
                        </a>
                    </nav>
                </div><!-- /.toolbar -->
             </header>
               <div id="collapse4" class="body">




     <div class="col-lg-6">
         <select id="select01" class="form-group form-control required" >
         <option value="admin">BONUS POINT</option>
            <option value="eng">REGISTER POINT</option>
             <option value="enter_point">ENTERTAINMMENT POINT</option>
                <option value="business_point"> BUSINESS POINT</option>
         </select>
  </div>

      <br>

       <div class="myClass" id="admin">
           <table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
          <th>No</th>
            <th>Type</th>
            <th>Transfer/Receive</th>
            <th>Withdrawal</th>
            <th>Remarks</th>
            <th>Charges</th>
            <th>Date</th>
                 </tr>
               </thead>
             <tbody>
               <tr>
            <td>1</td>
            <td>Bonus Point</td>
            <td>RM 1,500</td>
            <td>RM 2,000</td>
            <td>Success</td>
            <td>RM 100</td>
            <td>23 Oct 2019</td>
                 </tr>

                  <tr>
                     <td>1</td>
                     <td>Bonus Point</td>
            <td>RM 1,500</td>
            <td>RM 2,000</td>
            <td>Success</td>
            <td>RM 100</td>
            <td>23 Oct 2019</td>
                           </tr>
              </tbody>
          </table>
          </div>

         <div class="myClass" id="eng">
           <table class="table table-bordered table-striped table-hover">
            <thead>
              <tr>
           <th>No</th>
             <th>Type</th>
            <th>Transfer/Receive</th>
            <th>Withdrawal</th>
            <th>Remarks</th>
            <th>Charges</th>
             <th>Date</th>

        </tr>
    </thead>
             <tbody>
        <tr>
            <td>1</td>
            <td>Register Point</td>
             <td>RM 3,500</td>
            <td>RM4,000</td>
            <td>Success</td>
            <td>RM 150</td>
            <td>19 Oct 2019</td>
             </tr>
    </tbody>
        </table>
    </div>

        <div class="myClass" id="enter_point">
          <table class="table table-bordered table-striped table-hover">
     <thead>
        <tr>
            <th>No</th>
            <th>Type</th>
            <th>Transfer/Receive</th>
            <th>Withdrawal</th>
            <th>Remarks</th>
            <th>Charges</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Entertainment Point</td>
            <td>RM 1,250</td>
            <td>RM 2,100</td>
            <td>Success</td>
            <td>RM 120</td>
            <td>12 Oct 2019</td>
        </tr>
    </tbody>
          </table>
       </div>


      <div class="myClass" id="business_point">
       <table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
         <th>No</th>
            <th>Type</th>
            <th>Transfer/Receive</th>
            <th>Withdrawal</th>
            <th>Remarks</th>
            <th>Charges</th>
            <th>Date</th>
        </tr>
            </thead>
              <tbody>
        <tr>
            <td>1</td>
            <td>Business Point</td>
            <td>RM 5,500</td>
            <td>RM 1,000</td>
            <td>Success</td>
            <td>RM 300</td>
            <td>21 Oct 2019</td>
        </tr>
    </tbody>
          </table>


        </div>
       </div>
        </div>
          </div>
         </div>






  <script>
   $(function () { 
           $("#admin").show();

              $("#select01").on("change", function () {        
               $("#admin").hide();
             $(".myClass").hide();
               $("div[id='" + $(this).val() + "']").show();
            });
       });

              </script>

Теперь я хочу вызвать данные базы данных, чтобы использовать мою опцию выбора (типточка) положить в таблицу. Кто-нибудь может дать мне образец или изменить мою кодировку, чтобы показать мне? Большое спасибо за руководство.

Ниже информация о моей базе данных:

Answer 1

Вы можете использовать Ajax для заполнения таблицы.

Шаг 1: Добавить onchange для выбора поля ->

       <select id="select01" class="form-group form-control required" onchange="myFunction()" >
 <option value="admin">BONUS POINT</option>
    <option value="eng">REGISTER POINT</option>
     <option value="enter_point">ENTERTAINMMENT POINT</option>
        <option value="business_point"> BUSINESS POINT</option>
 </select>

Шаг 2: Настроить myFunction ->

  function myFunction(){

var selected_option= $("#select01 option:selected").val();

$.ajax({
 url: "backend_script.php",
 type:"post",
 data:{selected_option:selected_option},
success:function (resp){
 $('#admin table tbody').html(resp);

}


});


  }

Внутренний скрипт:

<?php

if(isset($_POST['selected_option'])){

 //implement your script here 
    $param=$_POST['selected_option'];

 // sql query
$sql=$this->con->prepare("select * from table where column=?");
$sql->bind_param("s",$param);
$sql->execute();
$result=$sql->get_result();
if($result->num_rows>0){
while($row=$result->fetch_assoc()){
 $column1=$row['column1'];
 $column2=$row['column2'];
 $column3=$row['column3'];

 echo "<tr><td>$column1</td><td>$column2</td><td>$column3</td></tr>";


}
}






}
 ?>

Надеюсь, это поможет, я уже использую его в одном из своих сценариев.

Answer 2

Вы уже используете JQuery, так что тогда это будет не так сложно.

$('#select01').change(function() {
  $('#admin table tbody').empty();

  $.post('/getData', {id: $('#select01').val()}, function(data) {
     if (data.return) {
       $.each(data.items, function(key, val) { //populate data
         $('#admin table tbody').append('<tr>'+
          '<td>'+(key+1)+'</td>' + //No
          '<td>'+val.type+'</td>' + //Type
          '<td>'+val.status+'</td>'+ //Transfer/Receive
          '<td>'+val.withdrawal+'</td>'+ //Withdrawal
          '<td>'+val.remarks+'</td>'+ //Remarks
          '<td>'+val.charges+'</td>' + //Charges
          '<td>'+val.date+'</td>'+ //Date
         '</tr>');
       });
     }
  }, 'json');
});

Это действительно зависит от того, как вы используете оператор SQL, это всего лишь пример.

getData:

function getData() {
  $servername = "localhost";
  $username = "username";
  $password = "password";
  $dbname = "myDB";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  $id = $this->input->post('id');

  $sql = "SELECT * FROM transaction_history WHERE id='".$id."'";
  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
   echo json_encode(array('return'=>1, 'items'=>$result));
  } else {
   echo json_encode(array('return'=>0));
  }
  $conn->close();
}