Ajax調用後無法返回HTML表格

我有兩個php頁面。頁面開始加載後，第一頁會立即運行引導進度欄。第二頁通過從api獲取值來創建表。Ajax調用後無法返回HTML表格

我想要做的是在第二頁生成表後獲取第一頁上的html表。於是，我開始通過調用第二頁

Ajax調用

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

爲了測試它返回什麼樣的數據，我用了一個警報的第一頁寫一個Ajax調用。但由於某種原因，它只是返回第二頁上的代碼，它不會返回表。

這裏是我的代碼 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/[email protected]/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/[email protected]/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請求成功，該表。我想在第二頁完成生成後在第一頁上顯示錶格。

有關如何實現這一點的任何想法？

來源

2017-08-30 user3402248

AJAX工作正常，它返回它可以從其他頁面中呼應了一切。如果你只想創建一個只包含表格的PHP腳本。 –

我在第二頁上唯一的回聲聲明是表中的值。 – user3402248

您正在提醒什麼是expensepage.php生成的。如果它以PHP代碼而不是執行的形式返回它的內容，我會檢查你的網絡服務器是否支持執行PHP。一旦確認工作，如果問題仍然存在，我們將需要看到費用頁面，因爲你的JS/jQuery看起來不錯。 –

我創建了一個新的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>

來源

2017-08-30 22:56:30 user3402248

Ajax調用後無法返回HTML表格

回答

相關問題