时间戳

首页 > 解决方案 > 在ajax中自动加载数据如何将其更改为单击按钮

php - 在ajax中自动加载数据如何将其更改为单击按钮

问题描述

代码中发生的事情是，每次我在多个下拉菜单中选择它都会获取数据我想要发生的是先单击按钮然后它将获取数据......谢谢你们在这里得到了代码 https ://www.webslesson.info/2018/05/ajax-live-data-search-using-multi-select-dropdown-in-php.html

<?php
//index.php

$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");

$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

?>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  <link href="css/bootstrap-select.min.css" rel="stylesheet" />
  <script src="js/bootstrap-select.min.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />

   <select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
   <?php
   foreach($result as $row)
   {
    echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>'; 
   }
   ?>
   </select>
   <input type="hidden" name="hidden_country" id="hidden_country" />
   <div style="clear:both"></div>
   <br />
   <div class="table-responsive">
    <table class="table table-striped table-bordered">
     <thead>
      <tr>
       <th>Customer Name</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
     </thead>
     <tbody>
     </tbody>
    </table>
   </div>
   <br />
   <br />
   <br />
  </div>
 </body>
</html>


<script>
$(document).ready(function(){

 load_data();

 function load_data(query='')
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('tbody').html(data);
   }
  })
 }

 $('#multi_search_filter').change(function(){
  $('#hidden_country').val($('#multi_search_filter').val());
  var query = $('#hidden_country').val();
  load_data(query);
 });

});
</script>

获取.php 

//fetch.php

$connect = new PDO("mysql:host=localhost;dbname=dbattendancelibrary", "root", "");

if($_POST["query"] != '')
{
 $search_array = explode(",", $_POST["query"]);
 $search_text = "'" . implode("', '", $search_array) . "'";
 $query = "
 SELECT * FROM tbl_customer 
 WHERE Country IN (".$search_text.") 
 ORDER BY CustomerID DESC
 ";
}
else
{
 $query = "SELECT * FROM tbl_customer ORDER BY CustomerID DESC";
}

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

$total_row = $statement->rowCount();

$output = '';

if($total_row > 0)
{
 foreach($result as $row)
 {
  $output .= '
  <tr>
   <td>'.$row["CustomerName"].'</td>
   <td>'.$row["Address"].'</td>
   <td>'.$row["City"].'</td>
   <td>'.$row["PostalCode"].'</td>
   <td>'.$row["Country"].'</td>
  </tr>
  ';
 }
}
else
{
 $output .= '
 <tr>
  <td colspan="5" align="center">No Data Found</td>
 </tr>
 ';
}

echo $output;


?>

标签： phpajaxpdo

解决方案

由于以下代码，它会触发 ajax 调用：

 $('#multi_search_filter').change(function(){
  $('#hidden_country').val($('#multi_search_filter').val());
  var query = $('#hidden_country').val();
  load_data(query);
 });

如果您想在单击按钮时触发，则需要先为该按钮输入 HTML。然后使用 load_data 事件的 id，例如，您将有一个名为“#btn_search”的按钮：

 $('#multi_search_filter').change(function(){
  $('#hidden_country').val($('#multi_search_filter').val());
 });

 $('#btn_search').click(function(e){
  e.preventDefault();
  var query = $('#hidden_country').val();
  load_data(query);
 });

您上面的完整 HTML 如下所示：

<?php
//index.php

$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");

$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

?>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  <link href="css/bootstrap-select.min.css" rel="stylesheet" />
  <script src="js/bootstrap-select.min.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />

   <select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
   <?php
   foreach($result as $row)
   {
    echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>'; 
   }
   ?>
   </select>
   <input id="btn_search" type="button" value="Filter" />
   <input type="hidden" name="hidden_country" id="hidden_country" />
   <div style="clear:both"></div>
   <br />
   <div class="table-responsive">
    <table class="table table-striped table-bordered">
     <thead>
      <tr>
       <th>Customer Name</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
     </thead>
     <tbody>
     </tbody>
    </table>
   </div>
   <br />
   <br />
   <br />
  </div>
 </body>
</html>


<script>
$(document).ready(function(){

 load_data();

 function load_data(query='')
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('tbody').html(data);
   }
  })
 }

 $('#multi_search_filter').change(function(){
  $('#hidden_country').val($('#multi_search_filter').val());
 });

 $('#btn_search').click(function(e){
  e.preventDefault();
  var query = $('#hidden_country').val();
  load_data(query);
 });

});
</script>

推荐阅读