ajax调用成功的for循环不起作用答案

【问题标题】：For loop in success of ajax call not workingajax调用成功的for循环不起作用
【发布时间】：2018-07-28 20:10:44
【问题描述】：

在 ajax 调用中，我收到一个成功的 json 数组。在 ajax 成功函数中，我想在 HTML 中显示这个数组。我可以一次显示整个数组，但我想循环数组的长度并一一显示元素。见下面的代码

$.ajax({
   type: "POST",
   : "json",
   url: "response.php",
   data: data,
   success: function(data) {
      $(".airports").html(
         "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
         "<div id='ap' class='collapse'>" +
         "<b>Departure airports</b><br>" + data["deptAirports"].length + "<br>" +
         for (i = 0; i < data["deptAirports"].length; i++){
               data["deptAirports"][i] + "<br>" +
         }
         "<b>Destination airports</b><br>" + data["destAirports"] +
         "</div>"
      )

destAirports 数组只是在 HTML 中被丢弃，这是可行的。但是，上面的 for 循环破坏了一切，它不会工作。

我缺少什么吗？

【问题讨论】：

你不能使用+添加for循环，这是javascript而不是模板语言
当我把for循环前面最后一行后面的+号去掉，放到for循环里面，还是不行
我的意思是说for循环不是表达式，你不能将它们嵌入到这样的字符串中，你需要做的是构建一个字符串变量并在for循环中附加它然后最后调用$(".airports").html(stringVar)
所以我在 $(".airports").html() 之外构建了 stringVar，但是我该怎么做，你能举个简单的例子吗？
签出data.deptAirports.join("<br>")

标签： javascript html json ajax for-loop

【解决方案1】：

你不能用循环连接一个字符串......将你的代码更改为：

$.ajax({
type: "POST",
url: "response.php",
data: data,
success: function(data) {
    var html = "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
     "<div id='ap' class='collapse'>" + "<b>Departure airports</b><br>" + data["deptAirports"].length + "<br>";

     for (i = 0; i < data["deptAirports"].length; i++){
           html += data["deptAirports"][i] + "<br>";
     }

     html += "<b>Destination airports</b><br>" + data["destAirports"] + "</div>";

     $(".airports").html(html);

【讨论】：

谢谢，这回答了我的问题！

【解决方案2】：

您的语法（和形式）不正确。 for 循环不能只放在字符串连接中。 for 循环不会产生内联文本值。相反，您需要从数组中生成内联文本值的东西。一种选择是使用Array.join()。这是一个可以在 JavaScript 控制台中运行的示例：

var someArray = [];
someArray.push('Value 1');
someArray.push('Value 2');
someArray.push('Value 3');
var myText = "<span>" + someArray.join("<br />") + "</span>";
console.debug(myText);

输出：

<span>Value 1<br />Value 2<br />Value 3</span>

将其放入 OP 的代码中，我们发现如下内容：

$.ajax({
   type: "POST",
   : "json",
   url: "response.php",
   data: data,
   success: function(data) {
      $(".airports").html(
         "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
         "<div id='ap' class='collapse'>" +
         "<b>Departure airports</b><br>" +
         data["deptAirports"].length + "<br>" +
         data["deptAirports"].join("<br />") + "<br>" +
         "<b>Destination airports</b><br>" + data["destAirports"] +
         "</div>");
   }
});

【讨论】：

【解决方案3】：

试试这个

$.ajax({
    type: "POST",
    dataType : "json",
    url: "response.php",
    data: data,
    success: function(data) {

        var markup = "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>";
        markup    += "<div id='ap' class='collapse'>";
        markup    += "<b>Departure airports</b><br>";
        markup    += data["deptAirports"].length + "<br>";

        $.each( data["deptAirports"] , function(index,value){
            markup +=  value + "<br>";
        });

        markup    += "<b>Destination airports</b><br>" + data["destAirports"] + "</div>";



        $(".airports").html(markup);

    }

});

【讨论】：