Question

我有两个php页面。页面开始加载后，第一页运行Bootstrap Progress Bar。第二页通过从api获取值来创建表。

我想要做的是在第二页生成表后在第一页上获取html表。所以，我首先从调用第二页的第一页写一个Ajax调用

Ajax调用

<script>
$.ajax({
    type: "GET",
    url: 'expensepage.php',
    success: function(data){
        alert(data);
    }
});
</script>

为了测试它返回的数据，我使用了一个警告。但由于某种原因，它只是返回第二页上的代码，它不返回表。

这是我的代码 Page 1

<!DOCTYPE HTML>

<html>

<head>

<title>Harvest Expense Report</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$.ajax({
    type: "GET",
    url: 'expensepage.php',
    success: function(data){
        alert(data);
    }
});
</script>

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

var progressBar = $('.progress-bar');
var percentVal = 0;


window.setInterval(function(){
    percentVal += 1;
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100)
    {
       var link = document.getElementById('nav-ask');
link.style.display = 'none'
    }

}, 500); })
</script>


</head>

<body>



 <!--Progress Bar-->
 <div class="row">
        <div class="col-md-12">
            <div class="progress"id="nav-ask">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
                </div>
                </div>





</body>

</html>

Page 2

     <!DOCTYPE HTML>

<html>

<head>

<title>Harvest Expense Report</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Choose a Month
  </button>
  <div class="dropdown-menu" select name="Dropdown_Month" id="month_dropdown" aria-labelledby="dropdownMenuButton">
    <option class="dropdown-item" href="#" value="This">This Month</option>
    <option class="dropdown-item" href="#" value="Last">Last Month</option>
  </div>
  </select>
</div>
<br>
<br>
<br>
 <h3><?php echo date('M Y'); ?></h3>
 <table class="table table-bordered">
 <thead>
     <tr>
     <th>Name</th>
     <th>Expense</th>
 </tr>
 </thead>

  <?php require_once( 'connection.php' );
  $result= $api->getUsers();
  $users=$result->data;



  $range= Harvest_Range::lastMonth();


  foreach($users as $key=>$value){

 $user_id=$value->get("id");
 $first_name=$value->get("first-name");
 $last_name=$value->get('last-name'); 

  $result_expenses=$api->getUserExpenses($user_id, $range);
 $expenses_data=$result_expenses->data;

 $total_cost=0;

foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");

}} 
 ?>
 <?php if($total_cost!=0){?>
 <tbody>
 <tr>
 <td> <?php echo $first_name; echo " ".$last_name; ?> </td>
 <td> $ <?php echo $total_cost; ?> </td>
 </tr>
 </tbody>
 <?php }}?>

 </table>

 </body>

 </html>

在AJAX GET请求成功后，我无法找到返回表的方法。我希望在第二页完成生成之后在第一页上显示该表。

关于如何实现这一目标的任何想法？

Answer 1

我创建了一个新的php页面并重写了语句以专门输出表的行。

<?php 
// The purpose of this page is to feed the Ajax request from the home page. It would basically collect the values for the table.

 require_once( 'connection.php' );
  $result= $api->getUsers();
  $users=$result->data;



  $range= Harvest_Range::lastMonth();

echo "Test";
  foreach($users as $key=>$value){

 $user_id=$value->get("id");
 $first_name=$value->get("first-name");
 $last_name=$value->get('last-name'); 

  $result_expenses=$api->getUserExpenses($user_id, $range);
 $expenses_data=$result_expenses->data;

 $total_cost=0;

foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");

}} 
  if($total_cost!=0){

 echo "<tr> <td>  ". $first_name; echo " ".$last_name; 


echo "</td> <td> ".$total_cost; echo " </td> </tr>";
 }}


?>

然后在第一个PHP页面上，我创建了一个表的结构，并在表的主体上添加了一个名为“display_rows”的ID。当请求成功时，我使用AJAX来定位该ID。

AJAX代码

   <script>
    $.ajax({
        type: "GET",
        url: 'expensegeneratereport.php',
        success: function(data){
            $('#display_rows').html(data);
        }
    });
    </script>

HTML

<table class="table table-bordered"><div id="display_table">
 <thead>
     <tr>
     <th>Name</th>
     <th>Expense</th>
 </tr>
 </thead>

 <tbody id="display_rows">
 </tbody>

 </table>

在Ajax调用之后无法返回HTML表

1 个答案: