Question

我通过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>

Answer 1

这对您有帮助，这是关于此主题的答案/文章：jQuery Mobile: Sending data from one page to the another

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

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

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

1 个答案: