Question

我正在尝试解析一些JSON并将元素“startTime”和“endTime”添加到列表中。我能够成功接收JSON，但是我无法正确解析然后循环以将每个实例添加到列表中。在UL的内部，我想为每个创建列表，如下面的演示：

$.ajax({
url: 'localhost:8080/sample?',
   dataType: 'json',            
success: function (data){ 
    var json = $.parseJSON(data);
var $calAppts = $('#appts');      
   $('<li data-role="list-divider">' + this.startTime
   + ' - ' + this.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

我试图在UL中插入LI的HTML：

<div data-role="main" class="ui-content" id="headerDate">
  <ul data-role="listview" data-inset="true" id="appts">  

  </ul>
</div>

所以基本上对于我在JSON中返回的每个约会，我想添加一个带有startTime和endTime的新LI。

我正在使用JQM 1.3.2和JQUERY 1.8.0。

谢谢

Answer 1

改变这个：

$.ajax({
url: 'localhost:8080/sample?',
dataType: 'json',            
success: function (data){ 
var json = $.parseJSON(data);
var $calAppts = $('#appts');      
 $('<li data-role="list-divider">' + this.startTime
 + ' - ' + this.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

进入这个：

$.ajax({
    url: 'localhost:8080/sample?',
    dataType: 'json',            
    success: function (data){ 
    var json = $.parseJSON(data);

    $.each( json, function( key, value ) {

      var agrega = "<li data-role='list-divider'>";
      if(key=='startTime')
      {
          agrega = agrega +  value
      }
      if(key=='endTime')
      {
          agrega = agrega + ' - ' +  value;
      }
       agrega = agrega + '<span class="ui-li-count"></span></li>';
       $('#appts').append(agrega);

    });

Answer 2

从您的代码示例中，您的问题似乎是您尝试在错误的位置（startTime）查找this属性。在您的示例中，startTime属性应该出现在您解析的JSON上，因此访问密钥应该可以解决问题：

$('<li data-role="list-divider">' + json.startTime
  + ' - ' + json.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

如果返回的JSON是一系列次数，那么您还需要遍历JSON对象：

$.each(json, function(key, value) {
  if (key === 'startTime') {
    // append to the list
  }
});

附加说明：

如果JSON是从AJAX调用返回的内容，那么您不需要在其上使用$.parseJSON。 JSON对象是JavaScript对象，因此您可以简单地使用返回的值并访问它们（这意味着您可以直接使用data.startTime而不是先解析它。）

Answer 3

请在下面找到回复

var ulObject = $("#appts");

var ajaxObject = $.ajax({
type:"POST",
dataType:"json",
url:"" //Provide the URL in the field to be processed.
});

ajaxObject.done(function(msg){
var jsonResponse = $.parseJSON(msg);
var listObjectStart = '<li data-role="list-divider">'
var listObjectEnd = '</li>';
$.each(jsonResponse,function(key,value){
if(key === "startTime")
{
listObjectStart += value;
}
else if(key === "endTime")
{
listObjectStart += '-'+value+'<span class="ui-li-count"></span>';
}
});

listObjectStart += listObjectEnd;

ulObject.append(listObjectStart);

});

Answer 4

如果服务器以json格式将数据发送回客户端，请尝试以下操作。

$.ajax({
    url: 'localhost:8080/sample?',
    dataType : 'json',
    success: function(data){
        $("#appts").append('<li data-role="list-divider">' + data.startTime 
+ ' - ' + data.endTime + '<span class="ui-li-count"></span></li>');
    },
    error: function(){
        alert('There was an error in communication.');
    }
});

JQuery从解析的JSON向列表添加元素

4 个答案: