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

Posted 2023-03-03

【中文标题】使用 Jquery Json P 将外部数据加载到 phonegap

【英文标题】：Loading external data into phonegap using Jquery Json P

【发布时间】：2013-03-16 08:38:03

【问题描述】：

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

); );

【问题讨论】：

尝试删除图像路径上的前导斜杠。

【参考方案1】：

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

如果在您的数据库中图像 URL 路径是：images/dinner/picture.jpg，那么代码需要是：'<img src="' + item.ImageURL + '">' 如果您的图片 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);