从 Ajax JSON 数据构建一个 jQuery Mobile ListView答案

【问题标题】：Build ajQuery Mobile ListView from Ajax JSON Data从 Ajax JSON 数据构建一个 jQuery Mobile ListView
【发布时间】：2014-04-21 10:53:52
【问题描述】：

我是 jQuery Mobile 的新手，我需要构建一个动态应用程序，以便将来导入到 PhoneGap。

为此，我避免使用 MVC4 移动 cshtml 文件，并构建 html/ajax 页面。

在应用程序的主页中，我有一个静态 ListView，当我点击一个选项时，我想调用一个 WebApi 方法，返回 JSON 数据并在应用程序中构建一个 ListView。

我怎样才能做到这一点？

谢谢。

【问题讨论】：

标签： jquery json jquery-mobile cordova

【解决方案1】：

var html = "";
$.getJSON('url', function (data) {
    for (var i in data) {
        html += "<li> <a class='ui-btn ui-btn-icon-right ui-icon-carat-r'>here json text</a></li>";
    }
    $("#ul-menu").append(html);
}).done(function () {
    $('#ul-menu').listview().listview('refresh');
});

html

<ul id="ul-menu" data-role="listview" class="ui-listview"></ul>

【讨论】：

您好，谢谢！如何从初始化页面传递信息，如所选 listView 项的 id，以构建第二页 listView？
详细说明你的答案。
@kathir 如何从第一个 listView 获得点击，提取 Id 以通过 Ajax 发送并使用此 listView 将列表检索到新页面？
它不会进入新页面，它会在同一页面重新加载

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet"
    type="text/css" />
<!--   <link href="css/mobipick.css" rel="stylesheet" type="text/css" /> -->

<!-- js -->

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
    ;
    }
$(function(){
    var html="";
    for(var i=0;i<=10;i++){
        html+="<li><a>Acura"+i+"</a></li>";
    }

        $("#ul-topmenu").append(html)   
        setTimeout(function(){
            $("#ul-topmenu").listview().listview("refresh");
        },300);
        $('#ul-topmenu li a').click(function(){
            alert($(this).text());
              $.ajax({
                  url: "put url here",
                  type: "POST",
                  dataType:"json",
                  data:$(this).text(),
                  success:function(result) {

                  }
              });
        })
});


    </script>
</head>
<body>
    <ul id="ul-topmenu" data-role="listview">
        <li><a>Acura</a></li>
    </ul>
</body>
</html>

【讨论】：