javascript - 创建 AJAX 调用以显示任何简单的键/值 JSON

Question

寻找从任何 json 调用自动生成 JQuery-Mobile ListView 的方法。我假设我会将结果加载到一个数组中，并迭代键/值，并将结果填充到 ul 中，并使用基于结果数量创建的 li...无法弄清楚如何获取键的长度，然后循环通过它们来填充<li>与键和值。想让它在不知道任何 json 值的情况下工作。

这是一个不起作用的起点:

$(document).ready(function(){
$.getJSON("json_mdb.php", function(data){
     for (var i = 0; i < data.length; i++) {
        $.each(data[i], function(key, val) {
            //console.log(key + ":" + val); 
            $('#myUL').html("<li>" + key + " : " + val + "</li>");  
        });
      } 
});                 
});


<div data-role="page" id="index" data-theme="d">

<div data-role="content">   
<div id="inventory">
    <ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
    </ul>
</div>
</div>

</div>

示例 JSON:

[{"LastName":"Doe","FirstName":"John","ID":"DJ0000"},{"LastName":"Doe","FirstName":"Jane","ID":"DA0000"}]

Answer 1

创建类似于以下内容的 HTML:

<div id='hiddenDiv'>
<ul><li>
    <label for='hiddenInput'></label>
    <input name='hiddenInput' type='text' />
</li></ul>
</div>
<form action="blah.php" method="post" class="coolFormCSSClass">
    <ul id='listViewUl' data-role="listview" ...>

    </ul>
</form>

然后解析您的 JSON，对于每个数据行，您必须克隆hiddenDiv，并使用您最喜欢的选择器更改标签和输入的值，然后附加到 $(".listViewUl")。

循环类似于:

var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {

//do stuff to the label (like fill in the text,
// remove the class and set some properties)        
$(".hiddenDiv label").doSomethingReallyCool()
//do stuff to the input
$(".hiddenDiv input").doSomethingReallyCool2()

var clonedLee = $(".hiddenLi").clone().appendTo(".listViewUl");
    });

只要克隆源是隐藏的(这样就不会打扰任何人)并且以任何形式存在(这样就不会弄乱您的服务器代码)，一旦您感到高兴，您就可以随心所欲地使用它，您可以克隆它并将其附加到您想要执行的位置。

...为什么医学不能这样？