在不跳转页面的情况下将 jquery ajax 调用加载到 div 中

Question

我在页面上加载了很多 ajax 调用，其中一些 ajax 调用的加载时间比其他调用要长，这意味着有时当用户已经向下滚动页面底部时，顶部的 ajax 调用已经加载并且所以他们不会看到数据（除非他们再次滚动到顶部）

这是我的代码：

<script type="text/javascript" language="javascript">
$(document).ready(function() {
  $('#stage1').load('myscript.php?data=1234567890');
  $('#stage2').load('myscript.php?data=1234567890');
  $('#stage3').load('myscript.php?data=1234567890');
  $('#stage4').load('myscript.php?data=1234567890');
  $('#stage5').load('myscript.php?data=1234567890');
  $('#stage6').load('myscript.php?data=1234567890');
  $('#stage7').load('myscript.php?data=1234567890');
  $('#stage8').load('myscript.php?data=1234567890');
  $('#stage9').load('myscript.php?data=1234567890');
  $('#stage10').load('myscript.php?data=1234567890');
  $('#stage11').load('myscript.php?data=1234567890');
  $('#stage12').load('myscript.php?data=1234567890');
  $('#stage13').load('myscript.php?data=1234567890');
  $('#stage14').load('myscript.php?data=1234567890');
  $('#stage15').load('myscript.php?data=1234567890');
});
</script>

HTML

<div id='stage1'>
<div id='stage2'>
<div id='stage3'>
<div id='stage4'>
<div id='stage5'>
<div id='stage6'>
<div id='stage7'>
<div id='stage8'>
<div id='stage9'>
<div id='stage10'>
<div id='stage11'>
<div id='stage12'>
<div id='stage13'>
<div id='stage14'>
<div id='stage15'>

如何让它们始终加载到页面底部？它们加载的顺序无关紧要。

Answer 1

如果我理解您的问题，请使用load() 回调：

$('#stage1').load('myscript.php?data=1234567890',function(){$('body').append(this);});

对所有元素执行此操作，或者如果所有元素在 load() 方法中具有相同的目标 url，请使用类。