我使用以下脚本在Jquery Mobile / Phonegap中基于JSON文件创建动态页面。
function loadMovie(movies){
$('#indexList').empty();
//add the movie items as list
$.each(movies, function(i, index){
$('#indexList').append(generateIndexLink(index));
});
//refresh the list view to show the latest changes
$('#indexList').listview('refresh');
}
$.getJSON("exp1_index.json", loadMovie);
//creates a movie link list item
function generateIndexLink(index){
return '<li><a href="javascript:void(0)'
+ '" onclick="goToIndexDetailPage(\''
+ index.naam
+ '\',\''
+ index.img +'\')">'
+ index.naam
+ '<img src="'
+ index.img + '"/><br>'
+ index.kunstwerk + '</a></li>';
}
function goToIndexDetailPage(indexNaam, indexImg){
var indexPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
+ indexNaam + "</h1></div><div data-role='content'><img src='"
+ indexImg + "'/></div><div data-role='footer'><h4>"
+ indexNaam + "</h4></div></div>");
indexPage.appendTo( $.mobile.pageContainer );
//go to the newly created page
$.mobile.changePage( indexPage );
}
我的JSON文件的URL也必须动态注入。为此,我使用Phonegap的文件系统。但是,这不适用于$ .getJSON,但它确实适用于XMLHttpRequest,例如:
function loadHome() {
var request = new XMLHttpRequest();
request.open("GET", pathHome, true);
request.onreadystatechange = function() {//Call a function when the state changes.
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
var home = JSON.parse(request.responseText);
var data = "<table cellspacing='0'>";
for (i = 0; i < home.length; i++) {
data += "<td>";
data += "<a data-ajax='false' href='" + home[i].link + "'/>";
data += "<figure><img src='" + home[i].img + "'/>";
data += "<figcaption>" + home[i].expo + "<br><em>";
data += home[i].datum + "</em></figcaption></figure></a></td>";
}
data += "</table>";
var twitter = document.getElementById("home");
twitter.innerHTML = data;
}
}
}
console.log("asking for home");
request.send();
}
所以我的问题是如何将创建动态页面的脚本转换为XMLHttpRequest而不是$ .getJSON。我的Javascript / Jquery技能不如解决这个问题那么好。所以我希望这里有人可以给我提供有关如何使这项工作的建议或建议。