如何动态获取数据并将其显示到弹出模式

Question

我创建了按日期和交易类型（如借方或贷方）显示资产负债表组的页面。在这里，我想设置一个模式，在每个日期按下按钮后显示特定日期的交易详情。

现在，我到目前为止所做的。 Modal 只能显示特定日期的详细信息，例如今天。我无法发送日期和 php 代码部分。

这是我的代码：

 <div id="balancesheet">
    
  
    <fieldset>
    <legend>Balance Sheet</legend>
 
    <?php
     {
    
      
    $conn=mysqli_connect("localhost","root","725427","brick_field_management_system_2019_2020");
    if(mysqli_connect_error()) {
        die('Connect Error('.mysqli_connect_error().')'.mysqli_connect_error());
    }
  
    $date = '2019/07/01';

    $edate = date('Y/m/d', strtotime("+1  day"));
    echo "
    Balance Sheet from $date to $edate";
    $sql = "select p.id, DATE(date) as date,transaction_type, sum(cash) as amount from person p join transaction t on p.id = t.id and date >='$date' and date < '$edate' group by DATE(date),transaction_type;";
    $result = $conn->query($sql);
    $sl = 0;
    $tdebit=0;
    $tcredit=0;
    $tbalance=0;
    if($result->num_rows >0){ 
    echo"<table>
        <tr>
        <th>Sl</th>
        <th>Date</th>
        <th>Debit</th>
        <th>Credit</th>
        <th>Balance</th>
        <th>Action</th>
      </tr>";
      while ($row = $result->fetch_assoc()) {
        $sl++;
        if ($row['transaction_type']=='dr'||$row['transaction_type']=='ladv') {
          $tdebit = $tdebit + $row['amount'];
          $tbalance = $tbalance - $row['amount'];
          echo "<tr><td>". $sl. "</td><td>". $row['date']. "</td><td>". $row['amount']."</td><td></td><td>".$tbalance."</td>";
           echo '<td><button id="mbutton" onclick ="sreport(\''.$row["date"].'\',\''.$row["transaction_type"].'\');">Report</button></td></tr>';
        }
        if ($row['transaction_type']=='cr'||$row['transaction_type']=='advi') {
          $tcredit = $tcredit + $row['amount'];
          $tbalance = $tbalance + $row['amount'];
          echo "<tr><td>". $sl. "</td><td>". $row['date']. "</td><td></td><td>". $row['amount']."</td><td>".$tbalance."</td>";
         echo '<td><button id="mbutton" onclick ="sreport(\''.$row["date"].'\',\''.$row["transaction_type"].'\');">Report</button></td></tr>';
        }
     
      }
       echo "<tr style='font-style: bold; font-size: 15px; text-align: center;'><td></td><td>Total</td><td>$tdebit</td><td>$tcredit</td><td>$tbalance</td></tr>";
      echo "</table>";
    }
    else
      echo "0 result.";

   }
   ?>
 </fieldset>
 </div>
  <div id="myModal" class="modal">

  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
    <h2>Total Report of <input  id="udate" style="background: gray;color:white; font-size: 20px; height: auto; width: auto; cursor: pointer;" readonly ></h2>
    </div>
    <div class="modal-body">
              <input type="hidden" id="ttype" name="userId"><br>

         <?php
       {
$conn=mysqli_connect("localhost","root","725427","brick_field_management_system_2019_2020");
    if(mysqli_connect_error()) {
        die('Connect Error('.mysqli_connect_error().')'.mysqli_connect_error());
    }
    $date = date('Y/m/d');

    $tomorrow = date('Y/m/d', strtotime("+1  day"));
    $sql = "select p.id, name, date, description, cash from person p join transaction t on p.id = t.id and (t.transaction_type='dr' or t.transaction_type='ladv') and date >= '$date' and date < '$tomorrow' ";
    $result = $conn->query($sql);
    $sl = 0;
    $total=0;
    if($result->num_rows >0){ 
    echo "<table>
        <tr>
        <th>Sl</th>
        <th>Name</th>
        <th>Description</th>
        <th>Amount</th>
        <th>Time</th>
      </tr>";
      while ($row = $result->fetch_assoc()) {
        $sl++;
        $total = $total + $row['cash'];
       echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['description']."</td><td>".$row['cash']."</td><td>".$row['date']."</td></tr>";
      }
      echo "<tr style='font-style: bold; font-size: 15px; text-align: center;'><td></td><td></td><td>Total Amount</td></td><td>$total</td></tr>";
      echo "</table>";
    }
    else
      echo "0 result.";
   }
    

    
?>
    </div>
  </div>

</div>
<script>

  function sreport(sdate,ttype){

    var sudate = document.getElementById("udate");
    sudate.value= sdate;
   var spuName = document.getElementById("ttype");
    spuName.value = ttype;
     modal.style.display="block";
   
  }
var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</div>

抱歉发布大代码，但为了清楚理解我的期望，我需要发布它。

Answer 1

我想说直接的解决方案可能如下所示。您的 php 文件的伪代码：

if (URL has GET parameter with name == 'date') {

  Use date.value to fetch data from your DB.
  echo JSON object with fetched data.

} else {

  Echo HTML page.
  Add fetch ajax function to the javascript block:

  js_fetch_data(date) {
  
    fetch('/?date=' + date)
    .then(response => response.json())
    .then(data => {
      Use data to open modal window.
    });

  }  

}