1

我的输出有问题：我想用 ajaxcall 中的一些数据填充输出。调用成功（每个内部的输出都填充了数据）但是每个内部的输出都附加到外部的输出。我总是“

<ul id="listname" data-inset=true></ul>

并不是

  <ul id="listname" data-inset=true><li>some data</li></ul>

 

$("div:jqmData(role='collapsible')").each(function(){
var id = $(this).data("id");
     var idDate=id.slice(7,18);
     var listapp="id_col_"+idDate;
      var listname="id_col_"+idDate;
                   output='<ul id="listname" data-inset=true>';

                             $.ajax({
                             url: 'lomodata.php',
                             data: 'timestamp='+idDate,
                             type: 'GET',
                             ContentType: "application/json",
                             dataType: "json",
                             success:function(res) {
                             if(res !='')
                            {
                            $.each(res, function(i, Object) {
                             output+='<li>'+Object.reg+'</li>';
                              console.log(output);
                            }); 
                             }
                             }

                             });

                    output+='</ul>';

                    $(this).append(output).trigger("create");
                    $(this).listview();
                    $(this).listview('refresh');
});
4

4 回答 4

2

请注意，$.ajax默认情况下是asynchronous，当您到达$(this).append(output)时，output尚未定义，因为.ajax()调用尚未完成。您需要将 移动append到success处理程序，或添加async: false选项，以便$.ajax成为阻塞调用（尽管这违背了 using 的目的ajax）：

success: function(res) {
  if (res !='') {
    var output='<ul id="listname" data-inset=true>';
    $.each(res, function(i, Object) {
      output+='<li>'+Object.reg+'</li>';
      console.log(output);
    });
    output+='</ul>';
    $(this).append(output).trigger("create");
  }
}
于 2012-08-22T09:40:17.797 回答
0

AJAX 是异步的。当您编写$.ajax( ... )时，将向服务器发送一个 HTTP 请求，然后服务器将继续进行下一个操作，output += '</ul>'。output此时 HTTP 请求还没有完成，因此在您追加到文档时，您的回调还没有执行。

于 2012-08-22T09:41:13.753 回答
0 
$("div:jqmData(role='collapsible')").each(function () {
  var el = this;
  var id = $(this).data("id");
  var idDate = id.slice(7, 18);
  var listapp = "id_col_" + idDate;
  var listname = "id_col_" + idDate;

  $.ajax({
    url: 'lomodata.php',
    data: 'timestamp=' + idDate,
    type: 'GET',
    ContentType: "application/json",
    dataType: "json",
    success: function (res) {
      output = '<ul id="listname" data-inset=true>';

      if (res != '') {
        $.each(res, function (i, Object) {
          output += '<li>' + Object.reg + '</li>';
          console.log(output);
        });
      }

      output += '</ul>';

      el.append(output).trigger("create");
      el.listview();
      el.listview('refresh');
    }

  });
});
于 2012-08-22T09:42:20.120 回答
0

如果将所有使用该output变量的代码行移到 ajax 调用的成功函数中，您将看到它有效。问题是您错误地使用了异步性。

像这样的东西：

$.ajax({
 url: 'lomodata.php',
 data: 'timestamp=' + idDate,
 type: 'GET',
 ContentType: "application/json",
 dataType: "json",
 success: function (res) {
   if (res != '') {
    var output = '<ul id="listname" data-inset=true>';
    $.each(res, function (i, Object) {
       output += '<li>' + Object.reg + '</li>';
     });
    output += '</ul>';

    console.log(output);

    $("#myObject").append(output).trigger("create");
    $("#myObject").listview();
    $("#myObject").listview('refresh');
  }
}

});

于 2012-08-22T09:43:25.983 回答