2

我有以下从本地 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.');
}

}); });

4

1 回答 1

2

我怀疑您需要更改链接路径。例子：

  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);
于 2013-03-26T14:55:52.847 回答