使用ajax填充HTML容器

Question

这是我第一次尝试使用Ajax。我有一个名为'.onboarding_steps'的容器，页面上还有一个ID为#next的下一步按钮。

当用户点击“下一步”时，我想通过Ajax将一系列“步骤”（html内容）加载到容器中。

目前我的代码如下：

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
});

这段代码当前是通过每个步骤迭代来完成的。然而，现在我想进一步使用Ajax。我应该如何实现类似于这样的功能：

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
});

目前这段代码只显示最后一步，而不是允许我逐步运行每一步。

- Sam Skirrow

Answer 1

有一个像这样的URL数组：

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"
]

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

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

function loadURL(url){
    $.get(url, function( data ) {
       $( ".onboarding_steps" ).html( data );
    });
}

实际上，使用 $.load 将请求响应加载到容器中有更好的方法：

$('.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：

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

现在计数器的增量为：

counter = (counter + 1) % steps;

- MinusFour

---

这会加载第一个文件，但是在点击后会返回错误"loadUrlURL未定义"。 - Sam Skirrow

@SamSkirrow，我刚意识到打错字了。应该是loadURL。 - MinusFour

太棒了，这个运行得非常好。快问一下，所有文件都必须加载才能使其工作吗？ - Sam Skirrow

不，它们是按点击加载的。 - MinusFour

编辑返回以下错误：步骤未定义。 - Sam Skirrow

Answer 2

AJAX是异步的，你需要在第一个回调函数里面进行第二个调用，在第二个回调函数里面进行第三个调用，在第三个回调函数里面进行第四个调用……现在它们都差不多同时执行，也就是说没有等待前面的操作完成。

- E.J. Brennan

---

我觉得我理解了，但您能否提供一个例子吗？ - Sam Skirrow

Answer 3

由于 $.get 将返回一个 Promise（而不是结果本身），所以 counter[0] 实际上不是响应值，而是方法的调用。当你执行 steps[counter] 时，实际上是在进行调用，这就是为什么最后一步被显示出来（基本上是正在处理的最后一步，因此正在执行 $().html(data) 方法）。

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

 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;
  })

（您必须等到这些调用被执行后才能开始使用步骤）

- Lucas Rodriguez