如何将ajax数据附加到html div

Question

url=url+calsign+"&dept="+deptString+"&dest="+destString+"&deptDate="+flightdate+"&deptTime="+flighttime+"&flightTime="+flyingtime+"&pilot="+'Mani'+":"+'Gnana'+"+&copilot="+'Mani'+":"+'Gnana'+"&crew="+'Mani'+":"+'Gnana'+"&userName="+user; 
$.get(url, function(data) {
$.each(data, function(i, item) {
var div = '<div class="row" id="flightsummary"><div class="col-md-6"><div class="summary"><p> Transportation Start Time ='+data[i]['TRANSPORT_START_TIME'];+'</p><p> Reporting Start Time ='+data[i]['REPORTING_START_TIME'];+'</p><p> Chocks Off Time ='+data[i]['CHOCKS_OFF_TIME'];+'</p><p> Chocks On Time ='+data[i]['CHOCKS_ON_TIME'];+'</p><p>+Duty End Time ='+data[i]['DUTY_END_TIME'];+'</p><p> Flight Time ='+ data[i]['FLIGHT_TIME'];+'</p><p> Flight Duty Period ='+data[i]['FLIGHT_DUTY_PERIOD'];+'</p></p></div></div><div class="col-md-6"><div class="summary summary-right"><p> Rest Period Start Time ='+data[i]['REST_PERIOD_START_TIME'];+'</p><p> Minimum Rest Hours ='+data[i]['MINIMUM_REST_HOURS'];+'</p><p> Next Transportation Start Time <span class="calendar"></span> ='+data[i]['NEXT_TRNS_START_TIME'];+'</p><p> Next Reporting Time <span class="calendar"></span> ='+data[i]['NEXT_REPORTING_TIME'];+'</p><p> Next Earliest Take Off <span class="calendar"></span> ='+data[i]['NEXT_EARLIEST_TAKE_OFF'];+'</p><p> Last Landing Time <span class="calendar"></span> ='+data[i]['LAST_LANDING_TIME'];+'</p></div></div></div>;';

                $('#summary').append(div);
});



        }).fail(function() {
            console.log("failed to load");
        }).done(function() {
            console.log("success to load");
        });

我正在尝试将一个 div 附加到具有数据响应的 html，能够通过控制台日志单独查看数据，但无法将所有数据附加到 html，只有第一个数据打印为 (

Transportation Start Time ='+data[i]['TRANSPORT_START_TIME'];+

) 其余值不打印，请帮我解决这个问题，提前致谢

Answer 1

问题在于你使用单引号作为主字符串和双引号作为属性值的 div 元素的构造。引号不匹配正在发生，因此它不被视为有效的 html。

请像下面这样构造html：

       var div = '<div class="row" id="flightsummary"><div class="col-md-6"><div class="summary"><p> Transportation Start Time =' + data[i]["TRANSPORT_START_TIME"]
     + '</p><p> Reporting Start Time =' + data[i]["REPORTING_START_TIME"] +
      '</p><p> Chocks Off Time =' + data[i]["CHOCKS_OFF_TIME"]
     + '</p><p> Chocks On Time =' + data[i]["CHOCKS_ON_TIME"]
      + '</p><p>+Duty End Time =' + data[i]["DUTY_END_TIME"]
      + '</p><p> Flight Time =' + data[i]["FLIGHT_TIME"]
      + '</p><p> Flight Duty Period =' + data[i]["FLIGHT_DUTY_PERIOD"]
       + '</p></p></div></div><div class="col-md-6"><div class="summary summary-right"><p> Rest Period Start Time ='
       + data[i]["REST_PERIOD_START_TIME"]
       + '</p><p> Minimum Rest Hours ='
        + data[i]["MINIMUM_REST_HOURS"]
        + '</p><p> Next Transportation Start Time <span class="calendar"></span> ='
        + data[i]["NEXT_TRNS_START_TIME"]
        + '</p><p> Next Reporting Time <span class="calendar"></span> ='
        + data[i]["NEXT_REPORTING_TIME"]
         + '</p><p> Next Earliest Take Off <span class="calendar"></span> ='
         + data[i]["NEXT_EARLIEST_TAKE_OFF"] + '</p><p> Last Landing Time <span class="calendar"></span> =' 
         + data[i]["LAST_LANDING_TIME"]; +'</p></div></div></div>;';