如何使用jQuery数据动态填充JSON页面？
我正在尝试从某个外部JSON (http://ip-api.com/json)获取数据。然后，我希望使用这些键动态填充listview。我希望每个列表项都是一个链接，当您单击该链接时，jQuery移动页将包含该键的匹配值。我有两个jQuery移动页面，一个是家，另一个是。
我试图通过将第二个“数据-角色=页”div的id更改为当前的键数据，并将密钥数据附加到h2，并将值数据附加到p中来实现这一点。它创建了一个正确的键列表，但是当我单击第一个项时，h2包含所有的键，而p包含所有的值。我如何修改它，以便通过单击相应的键列表项，使每个键/值对最终成为当前正在创建的任意h2移动页的jQuery和p？
我一直在尝试使用来自如何使用JSON数据填充jQuery移动ListView？的代码，但由于它没有使用外部JSON，所以我无法完全使用它。
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true">
</ul>
</div>
</div>
</div>
<div data-role="page" id="dataPage">
<div data-role="header">
<h2 id="dataHeading"></h2>
</div>
<div data-role="content">
<p></p>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>');
$("ul#list").listview("refresh");
$("div#dataPage").attr("id", key);
$("h2#dataHeading").append(key);
$("p").append(val);
});
});
})回答 2
Stack Overflow用户
发布于 2016-06-02 17:02:30
一个解决方案。真正起作用的是完全不使用第二个JQM页面，并通过将数据附加到JavaScript中的主体来创建它。这是更新的代码。
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="arrow-r" data-autodividers="true">
</ul>
</div>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>');
$("body").append('<div data-role="page" id="'+ key +'"><div data-role="header" id=""><h2 id="dataHeading"></h2 ></div><div data-role="content"><p>'+ val +'</p></div></div>');
$("ul#list").listview("refresh");
});
});
});Stack Overflow用户
发布于 2016-06-02 10:58:49
您使用的是$.each循环，因此它在遍历json数据时一直将$("h2#dataHeading").append(key); & $("p").append(val);追加到第二页，因此它实际上不会创建单独的页面。它所做的只是更改一次id的dataPage页面，之后它将无法找到$("div#dataPage")，所以我很惊讶条目中的所有链接都在工作，除了第一个链接。
一种更有效的方法是使用*属性直接将key和val存储在列表项上，单击后获取它们，追加到第二页并动态打开第二页。这减少了对单独页面的需求，同时保持DOM小。
例如
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li data-key="'+key+'" data-val="'+val+'"><a>'+ key + '</a></li>');
$("ul#list").listview("refresh");
});
});
//The list item click function
$("#list> li").on("click", function() {
var key= $(this).attr("data-key");
var val= $(this).attr("data-val");
$("#dataHeading").empty().append(key);
$("p").empty().append(val);
$(":mobile-pagecontainer").pagecontainer("change", "#dataPage", { transition: "slide" });
});
});我建议用类似于$(document).ready的东西代替分页，因为JQM最适合内置页面事件。
在使用$(“：移动页面保持器”)时，您也可以将数据发送到页面，但是您还需要另一个函数，如页前瞻，在页面显示数据之前将数据附加到页面--如果您决定这样做，请阅读Notes以获得支持的版本。JQM反对使用新的替换事件的版本中的某些事件。
https://stackoverflow.com/questions/37579795
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号