如何使用 JSON 在动态中转换列表视图静态

How transform listview static in dynamic using json?

本文关键字：转换 列表 视图 静态 动态 何使用 JSON      更新时间：2023-09-26

使用长轮询，我更新了我的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>`
我

感谢您的回答，我希望我能举个例子来说明如何实现.

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]);
}

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

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

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

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

然后在 updatePage(( 代码中，迭代数组并为数组的每个成员创建一个列表项。将这些附加到列表视图，告诉 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();

这是一个有效的演示

相关文章：