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 に答える