Javascript

Question

在按代码加载某些HTML时，我希望从服务器获取一些数据。所以我从一个同步函数开始，在此我调用一个POST。

我创建了一个例子

＆＃13;

＆＃13;

$(document).ready(function() {

  for (var i = 1; i < 6; i++) {
    var div = $("<div></div>");

    var price = 0;
    
    /* get the price from the server by passing the object id

    $.ajax({
      type: 'POST',
      url: '/getPrice',
      contentType: 'application/json',
      data: JSON.stringify({
        id: i
      })
    }).done(function(response) {
      price = response.price;
    });
    
    */

    div.html("id " + i + " price " + price);

    $("#container").append(div);
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

＆＃13;

＆＃13;

＆＃13;

运行代码时，价格始终为0。我知道AJAX调用是异步的，但我该如何修复代码？

Answer 1

将您的代码放在done内，如

$.ajax({
  type: 'POST',
  url: '/getPrice',
  contentType: 'application/json',
  data: JSON.stringify({
    id: i
  })
}).done(function(response) {
  price = response.price;
  div.html("id " + i + " price " + price);
  $("#container").append(div);
});