Javascript 如何使用JSON数据动态填充jQuery移动页面?
我试图从一些外部JSON()获取数据。然后我想使用这些键来动态填充listview。我希望每个列表项都是一个链接,当您单击该链接时,jQuery移动页面将包含键的匹配值。我有两个jQuery移动页面,一个主页,另一个 我试图通过将第二个“datarole=page”div的id更改为当前键数据,并将键数据附加到h2,将值数据附加到p来实现这一点。它正在创建一个正确的键列表,但当我单击第一项时,h2包含所有键,p包含所有值。我如何修改它,以便通过单击相应的键列表项,每个键/值对最终成为当前正在创建的jQuery移动页面的h2和p 我一直在尝试使用来自的代码,但我不能完全让它工作,因为它没有使用外部JSONJavascript 如何使用JSON数据动态填充jQuery移动页面?,javascript,jquery,json,jquery-mobile,Javascript,Jquery,Json,Jquery Mobile,我试图从一些外部JSON()获取数据。然后我想使用这些键来动态填充listview。我希望每个列表项都是一个链接,当您单击该链接时,jQuery移动页面将包含键的匹配值。我有两个jQuery移动页面,一个主页,另一个 我试图通过将第二个“datarole=page”div的id更改为当前键数据,并将键数据附加到h2,将值数据附加到p来实现这一点。它正在创建一个正确的键列表,但当我单击第一项时,h2包含所有键,p包含所有值。我如何修改它,以便通过单击相应的键列表项,每个键/值对最终成为当前正在创建
<!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);
});
});
})
地理位置数据
地理位置数据
单击此处获取地理位置数据
$(文档).ready(函数(){
$.getJSON(“http://ip-api.com/json,函数(数据){
$。每个(数据、函数(键、值){
$(“ul#list”).append(“”+“+” ”);
$(“ul#list”).listview(“刷新”);
$(“div#dataPage”).attr(“id”,key);
$(“h2#数据标题”)。追加(键);
$(“p”)。追加(val);
});
});
})
您正在使用一个$。每个循环都会不断追加$(“h2#dataHeading”)。追加(键)代码>&$(“p”)。追加(val)代码>返回到第二页,因为它在json数据中循环,所以实际上不会创建单独的页面。它所做的只是更改dataPage
页面的id
一次,此后它将无法找到$(“div#dataPage”)
,因此我很惊讶,除了第一个链接之外,项目中的所有链接都能正常工作
更有效的方法是使用属性将键
和val
直接存储在列表项上,单击后抓取它们,附加到第2页并动态打开第2页。这在保持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" });
});
});
$(文档).ready(函数(){
$.getJSON(“http://ip-api.com/json,函数(数据){
$。每个(数据、函数(键、值){
$(“ul#list”).append(“
使用时,您也可以将数据发送到页面,但您需要另一个功能,如在页面显示数据之前将数据附加到页面上——如果您决定这样做,请阅读有关支持哪些版本的说明。JQM不推荐版本中的某些事件,而支持新的替换事件解决方案使用第二个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");
});
});
});
地理位置数据
地理位置数据
单击此处获取地理位置数据
$(文档).ready(函数(){
$.getJSON(“http://ip-api.com/json,函数(数据){
$。每个(数据、函数(键、值){
$(“ul#list”).append(“”+“+” ”);
$(“body”).append(“”+val+””);
$(“ul#list”).listview(“刷新”);
});
});
});