php - 加载剩余页面内容后加载页面的一部分

Question

我有一个 html 页面，其中包含许多 PHP 包含语句。其中一个需要更长的时间来加载。但我希望剩余的元素比这更早加载，但想保持顺序

index.php
<div id="a1">
 <?  include('a.php'); ?>
</div>
<div id="b1">
 <?  include('b.php'); ?>
</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

我希望保持相同的顺序。b.php 需要更长的时间来加载影响最近加载的整个页面。我想先加载 a.php 和 c.php，然后再加载 b.php。我如何使用 AJAX 来做同样的事情？

Answer 1

<script type="text/javascript">
  $(function() {
    $('#a1').load( 'a.php', function() {
      $('#c1').load( 'c.php', function() {
        $('#b1').load( 'b.php' );
      });
    });
  });
</script>

Answer 2

<? 
$a=false;
$b=false;
$c=false;
?>
<div id="a1">
<? $a = include('a.php'); ?>
</div>
<div id="c1">
<? $c = include('c.php'); ?>
</div>

<? if ( $a && $c) { ?>
<div id="b1">
<? include('b.php'); ?>
</div>
<? } ?>

如果你想要特定的定位，然后使用 javascript

Answer 3

您可以使用 jQuery.load()将其他页面加载到您的 html 页面中

<div id="a1">
<?  include('a.php'); ?>
</div>
<div id="b1">

</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

 <script type='text/javascript'>
  $(document).ready(function (e) {
        $('#b1').load('/path/to/b.php');
   });
 </script>

Answer 4

索引.php

<div id="a1"> </div>
<div id="b1"> </div>
<div id="c1"> </div>


 <script>
 (function() {
 function ajax(location, element){
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       element.innerHTML = xhr.responseText;
       return true;
    };
   }

  xhr.open("GET", location, true);
  xhr.send();   
  }
  if(true) {
    var a = document.getElementById('a1');
    var b = document.getElementById('b1');
    var c = document.getElementById('c1');
    if(ajax('/a.php', a) && ajax('/c.php', c)) {
      ajax('/b.php', b);
    }
  } 
  })();
</script>

Answer 5

<script>
    $(function(){
        $('#a1').load('a.php');
        $('#b1').load('b.php');
        $('#c1').load('c.php');
    });
</script>
<div id="a1">
 <?  include('a.php'); ?>
</div>
<div id="b1">
 <?  include('b.php'); ?>
</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

如果 jquery.js 不存在，请将其包含在您的脚本中。之前