使用Jquery Json将外部数据加载到phonegap中P

Question

我有我从本地mysql获得的以下json对象。

<([{"ID":"1","Title":"Chicken & Chili","Price":"$8.99","ImageURL":"\/images\/dinner\/chicchili.jpg","Serves":"2","Description":"This unique and delicious chicken chili is a much-requested meal around our house. I think you'll find it's a nice change of pace from the typical beef version."},{"ID":"2","Title":"Chicken Franchase","Price":"$9.99","ImageURL":"\/images\/dinner\/chicfran.jpg","Serves":"2","Description":"Served in a lemon and butter sauce"},{"ID":"3","Title":"Salmon","Price":"$14.99","ImageURL":"\/images\/dinner\/salmon.jpg","Serves":"1","Description":"A simple soy sauce and brown sugar marinade, with hints of lemon and garlic, are the perfect salty-sweet complement to rich salmon fillets."}]); 

我用下面的代码来获取json对象到iPhone模拟器。我成功地在屏幕上获得标题和价格，但不是图像。是否有任何方法获取图像？或者我在编码中遗漏了一些东西？请给我一些建议？

$(document).ready(function(){ 
var output = $('#output'); 
$.ajax({ 
url: 'http://localhost/Backend/getDinner.php', 
dataType: 'jsonp', 
jsonp: 'jsoncallback', 
timeout: 5000, 
success: function(data, status){ 
    $.each(data, function(i,item){ 
    var Menu_Dinner = '<li><a href="detail.html?id=' + item.ID + '">' + 
     '<img src="images/dinner/'+ item.ImageURL + '">' + 
    '<h2 class="ui-li-heading">' + item.Title + '</h2 >' + 
    '<h2>' + 'Price: ' + item.Price + '</h2>'+ '</a></li>'; 
    output.append(Menu_Dinner); 
    }); 
}, 
error: function(){ 
    output.text('There was an error loading the data.'); 
} 

}）; }）;

Answer 1

我怀疑你需要改变链接路径。例如：

1. 如果你的数据库内的图像URL路径是：images/dinner/picture.jpg那么代码需要：'<img src="' + item.ImageURL + '">'
2. ，如果你的图片URL路径就是picture.jpg那么你可以使用现有的代码。

我不知道该模拟器有一个控制台窗口，您可以查看，如果它下面的行添加到success函数的结尾，并检查各列表项以其HREF属性：

console.log($("#output").html()); 

作为一方，尽量减少操作DOM的次数。所以试试这里面：

var temp = ""; 
$.each(data, function(i,item){ 
    var Menu_Dinner = '<li><a href="detail.html?id=' + item.ID + '">' + 
    '<img src="images/dinner/'+ item.ImageURL + '">' + 
    '<h2 class="ui-li-heading">' + item.Title + '</h2 >' + 
    '<h2>' + 'Price: ' + item.Price + '</h2>'+ '</a></li>'; 
    temp += Menu_Dinner; 
}); 
output.append(temp);