Question

使用长轮询我更新了我的jquery移动列表视图，但我用这种方式编写静态代码来更新列表视图：

 function updatePage() {
      if (ajaxRequest.readyState == 4) {

             var parsobj = jQuery.parseJSON( ajaxRequest.responseText );
             console.log(ajaxRequest.responseText);
            $("#nameobj1").empty().append(parsobj.nameobj0);
            $("#prezzoobj1").empty().append(parsobj.prezzoobj0);
            $("#nameobj2").empty().append(parsobj.nameobj1);
            $("#prezzoobj2").empty().append(parsobj.prezzoobj1);
            $("#nameobj3").empty().append(parsobj.nameobj2);
            $("#prezzoobj3").empty().append(parsobj.prezzoobj2);
            $("#nameobj4").empty().append(parsobj.nameobj3);
            $("#prezzoobj4").empty().append(parsobj.prezzoobj3);
            $("#nameobj5").empty().append(parsobj.nameobj4);
            $("#prezzoobj5").empty().append(parsobj.prezzoobj4);
            makeAjaxRequest();
      }
  }
  function makeAjaxRequest() {
      var datashowobj= {'type':"show-obj" };
      ajaxRequest = new XMLHttpRequest();
      ajaxRequest.onreadystatechange = updatePage;
      ajaxRequest.open("POST","http://localhost:8080/asta/ServletObjects", true);
      ajaxRequest.setRequestHeader("Content-Type", "application/json");
      ajaxRequest.send( JSON.stringify(datashowobj));
   }

服务器发送此json {“nameobj0”：“w”，“prezzobj0”：1.0，nameobj1：“x”，“prezzobj2”：60.0 ...}

我想要在列表视图中放置的li标签如下 `

      <li><h3 id = "nameobj1"></h3> 
      <p id="prezzoobj1"></p>
      <div data-role="controlgroup" data-type="horizontal" data-mini="true">
   <select>
    <option>$</option>
    <option>€</option>
    <option>£</option>
    <option>¥</option>
    <option>₩</option>
    <option>₹</option>
   </select>
   <input id="currency-controlgroup1" type="text" data-wrapper-class="controlgroup-  textinput ui-btn">
  <button id="bo1" class ="myclass" data-icon="plus">Piazza l'offerta</button>
  <div id="piaz1"></div> 

  </div>
     </li>`

我感谢你的答案，希望我能有一个如何实现的例子。

Answer 1

var parsobj = jQuery.parseJSON( ajaxRequest.responseText );
for (var id in parsobj)
{
    if ($("#"+id).length>0)  //check if exists an element with this id
        $("#"+id).empty().append(parsobj[id]);
}

Answer 2

在HTML标记中，只需创建一个空列表：

<ul id="mylist" data-role="listview"></ul>

将返回的JSON更改为jSON对象数组，其中数组中的每个项目都是listview中一个listitem的数据，例如：

var parsobj =[
    {"nameobj":"w","prezzobj":1.0}, 
    {"nameobj":"x", "prezzobj":60.0},
    {"nameobj":"y","prezzobj":11.0},
    {"nameobj":"z","prezzobj":58.0}    
];

然后在您的updatePage（）代码中，迭代数组并为数组的每个成员创建一个listitem。将这些附加到列表视图，告诉jQM刷新列表视图并增强所有子控件：

var html = '';
for (var i = 0; i < parsobj.length; i++){
    html += '<li>';
    html += '<h3>' + parsobj[i].nameobj + '</h3>';
    html += '<p>' + parsobj[i].prezzobj + '</p>';        
    html += '<div data-role="controlgroup" data-type="horizontal" data-mini="true"><select><option>$</option><option>€</option> <option>£</option><option>¥</option><option>₩</option><option>₹</option></select>';
    html += '<input id="currency-controlgroup' + i +'" type="text" data-wrapper-class="controlgroup-textinput ui-btn" />';
    html += '<button id="bo' + i +'" class ="myclass" data-icon="plus">Piazza l\'offerta</button>';
    html += '<div id="piaz' + i +'"></div></div>';
    html += '</li>';
}

//empty the listview, append new items and tell jQM to refresh
$("#mylist").empty().append(html).listview("refresh").enhanceWithin();

这是一个有效的 DEMO

如何使用json转换listview静态动态？

2 个答案: