Javascript 使用ajax填充html容器

这是我第一次尝试Ajax。 我有一个名为

”的容器。我的页面上还有一个ID为
#next
的“下一步”按钮

我试图用一系列“步骤”（html内容）填充容器，当用户单击“下一步”时，下一步将加载到容器中

我想使用Ajax来实现这一点。
我现在的代码如下所示：

var steps = [
  'This is step one',
  'This is step two',
  'This is step three',
  'This is step four'
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  })
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php"
]

$('.onboarding_steps').load(baseUrl + (counter + 1) + '.php');

这段代码当前迭代每个步骤。然而，现在我想更进一步，使用Ajax。我怎样才能实现这样的目标：

var steps = [
  'This is step one',
  'This is step two',
  'This is step three',
  'This is step four'
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  })
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php"
]

$('.onboarding_steps').load(baseUrl + (counter + 1) + '.php');

目前，此代码只显示最后一步，而不允许我逐个运行每个步骤。
AJAX是异步的，您需要在回调中对第一步进行第二次调用，在回调中对第二步进行第三次调用，第三个回调中的第四个…现在它们或多或少都在同时执行-也就是说，不等待前一个完成。
让数组中的URL如下所示：

var steps = [
  'This is step one',
  'This is step two',
  'This is step three',
  'This is step four'
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  })
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php"
]

$('.onboarding_steps').load(baseUrl + (counter + 1) + '.php');

然后在每次单击时（以及在开始时）加载它们：

实际上，有一种更好的方法可以将请求的响应加载到带有
$的容器中

$('.onboarding_steps').load(url);

这样你就可以写：

counter = 0;
$('.onboarding_steps').load(steps[counter]);
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').load(steps[counter]); // the new incremented value
});

不需要任何其他功能

编辑：如果您可以使用计数器生成url，则可能不需要数组：

var baseUrl = "wp-content/plugins/skizzar-onboarding/ajax/step";
var steps = 4; /*or however many steps it got*/

然后您只需像这样加载url：

var steps = [
  'This is step one',
  'This is step two',
  'This is step three',
  'This is step four'
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
      $( ".onboarding_steps" ).html( data );
  })
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
  counter = (counter + 1) % steps.length; // increment your counter
  $('.onboarding_steps').html(steps[counter]); // the new incremented value
});

var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php"
]

$('.onboarding_steps').load(baseUrl + (counter + 1) + '.php');

现在计数器增量为：

counter = (counter + 1) % steps;

由于$.get将返回一个承诺（而不是结果本身），
计数器[0]
实际上不是响应值，而是对方法的调用。当您执行
steps[counter]
时，实际上是在进行调用，这就是显示最后一步的原因（基本上是进程中的最后一步，因此它正在执行
$（）.html（数据）
方法）

您可以做的是初始化数据，然后访问它：

 steps = [];
 $.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
      steps[0] = data;
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
      steps[1] = data;
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
      steps[2] = data;
  }),
  $.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
      steps[3] = data;
  })

（您必须等到这些调用发出后才能开始使用
步骤
）
我想我明白了，但您能否提供一个示例？这将加载第一个文件，但单击返回错误loadUrlURL不正确defined@SamSkirrow，我刚意识到输入错误。应该是
loadURL
。太棒了，这就像是一种享受。快速问，在这起作用之前，是否必须加载所有文件？不，它们已加载在点击的基础上。数组的目的是保存单个url，但如果url中的所有更改都是最后一个数字（只需连接计数器），则实际上不需要该数组。但如果所有url都非常不同，则该数组可以工作。