将数据从列表视图页面传递到 jquery mobile 中的详细视图页面答案

【问题标题】：Pass data from list view page to detail view page in jquery mobile将数据从列表视图页面传递到 jquery mobile 中的详细视图页面
【发布时间】：2013-03-28 17:38:09
【问题描述】：

我正在通过 ajax 生成列表视图。我想要做的是，当用户点击它时，它会通过它的 id 进入详细视图。我得到了列表，但没有得到详细信息。我的问题是如何将 id 从页面传递到另一个页面。

$(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 data-transition="slide" href="details.html?ID=' 
    + item.ID + '">' +`'<img src="'+ item.ImageURL + '">' +
    '<h2 class="ui-li-heading">' + item.Title + '</h2 >' + 
    '<h2>' + 'Price: ' + item.Price + '</h2>'+ '</a></li>';
    output.append(Menu_Dinner);
    console.log($("#output").html());`
});
},
error: function(){
  output.text('There was an error loading the data.');
}
});
});

我使用下面的代码从列表视图中获取 id 并显示该特定列表的详细信息。

$('#detailsPage').live('pageshow', function(event) {
var ID = getUrlVars()["ID"];
$.getJSON(serviceURL + 'getDinner.php?ID='+ID, displayItem);
});  
function displayItem(data) {
var item = data.item;
console.log(item);
$('#itemPic').attr('src', '' + item.ImageURL);
$('#fTitle').text(item.Title);
$('#Description').text(item.Description);
$('#Price').text(item.Price);
}

这是显示详细信息的detail.html页面。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <div id="detailsPage" data-role="page" >

<div data-role="header">
       <a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
    <h1>Details</h1>
</div>

    <div data-role="content"> 

  <img id="itemPic"/>
  <h3 id="Title"></h3>
      <p id="Description"></p>
      <p id="Price"></p>


      <button class="add-to-cart">+ Add to Cart</button>
</div>

  </div>

  </body>

  </html>

【问题讨论】：

标签： jquery jquery-mobile jsonp jquery-mobile-listview

【解决方案1】：

这会对你有所帮助，这是我关于这个主题的回答/文章：jQuery Mobile: Sending data from one page to the another

在那里你会找到几个解决方案，你只需要选择一个正确的。

还有一点，如果您想坚持自己的解决方案，您需要一种在页面转换期间存储数据的方法，我的另一位 ARTICLE 可以帮助您。只需搜索名为：页面转换之间的数据/参数操作的章节。

【讨论】：

非常感谢您的回复。
代码仍然无法正常工作。是不是代码有问题。 $('#detailsPage').live('pageshow', function(event) { var ID = getUrlVars()["ID"]; $.getJSON(serviceURL + 'getDinner.php?ID='+ID, displayItem) ; });函数 displayItem(data) { var item = data.item;控制台.log（项目）； $('#itemPic').attr('src', '' + item.ImageURL); $('#fTitle').text(item.Title); $('#Description').text(item.Description); $('#Price').text(item.Price); }
您使用的方法仅适用于多个 HTML jQuery Mobile 模板，请检查它。还有 4 种可用的解决方案，不要告诉我找不到可行的解决方案。
终于找到了解决办法。希望这对将来的某人有所帮助。这是链接：jsfiddle.net/rfF3j/1