Question

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

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

您可以使用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 2

<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。

之前

Answer 3

<? 
$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 4

的index.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 type="text/javascript">
  $(function() {
    $('#a1').load( 'a.php', function() {
      $('#c1').load( 'c.php', function() {
        $('#b1').load( 'b.php' );
      });
    });
  });
</script>

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

5 个答案: