根据用户输入显示数据

Question

我有一个包含 2 列（侧面和中间）的页面

在侧栏中，我有一个带有日期和按钮的表单（查看摘要报告）。

当用户选择日期并单击按钮时，它必须从 MySQL DB 中获取数据并在中间列中显示结果。

当我对 get_summary_sheet 执行调用操作时，它会在新页面上显示信息。 这证实它工作正常。 但是，我不想在新页面上显示它。 一旦用户单击按钮，我想将其显示在中间列中。

我正在研究和探索使用 onclick function 的选项。

这是我的侧栏：

<div class="column side">
    Select Date:
      <br>
      <input type="date" id="select_summarydate" name="select_summarydate" required><br>
      
      <button onclick="myFunction()">Display Report</button>
    
</div>   

下面是 PHP 文件中的代码示例：

     $yourDate = $_GET['select_summarydate'];
     
     $sqlpole="select count(*) as totalpole from user where MeterType = 'Pole Mounted' AND Category = 'Inspection' AND Date = '".$yourDate."%'";
     $resultpole=mysqli_query($con,$sqlpole);
     $datapole=mysqli_fetch_assoc($resultpole);

我需要将结果调用到中间列并显示在表格中：

<div class="column middle">
    * display results of function in php file        
</div>

下面是一段 JS 代码：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
</script>
<script language="javascript">
    function myFunction() {
        // function below will run get_summary_sheet and should display in middle column
        
        $.ajax({
            type: "GET",
            url: "get_summary_sheet.php" ,
            ???????,
            ???????
     });
</script>

什么代码必须go变成Javascript function？

Answer 1

function myFunction() {
   var select_summarydate = $('#select_summarydate').val()
    $.ajax({
        type: "GET",
        url: "get_summary_sheet.php" ,
        data: {
            select_summarydate : select_summarydate
          },
        success: function(resp){
             $('.middle').html(resp)    
       } 
   });
 }

这是一个完整的 ajax function 发送数据并在 html 中显示获取的数据

您的 php 代码如下所示

$yourDate = $_GET['select_summarydate'];
 
 $sqlpole="select count(*) as totalpole from user where MeterType = 'Pole Mounted' AND Category = 'Inspection' AND Date = '".$yourDate."%'";
 $resultpole=mysqli_query($con,$sqlpole);
 while ($single = $resultpole->fetch_assoc()) {
            echo  $single['firstcolumn'].' '.$single['secondcolumn'] 
       .'<br>';
        }