0

我正在通过 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>
4

1 回答 1

2

这将对您有所帮助，这是我关于此主题的答案/文章：jQuery Mobile：将数据从一个页面发送到另一个页面

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

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

于 2013-03-28T19:07:13.393 回答