从多个 jquery 移动页面传递参数

Question

这是我几周来一直在努力解决的问题，我希望有人能提供帮助。我有两个 table，我正在 returning json 数据，table 1 return 产品类别列表，table 2 returns 产品列表。我已经设法将类别 table 中的 json 数据 return 连接到我的查询移动应用程序中的列表视图我现在的挑战是我似乎无法让我的列表视图显示产品单击类别时的信息 - 我正在使用带有 jquery 移动设备的多页应用程序，请帮助

总结- 我需要知道如何传递所选产品类别的 ID 以附加到我为获取产品详细信息而进行的 REST 调用。

如果您需要更清楚的说明，我会post在这里。

Answer 1

首先我们创建页面

product.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>

<body>    
    <div data-role="page" id="product_page">
        <div data-role="header" class="">
             <h3>Home</h3>            
        </div>
        <div role="main" id="" class="ui-content">   
            <ul data-role="listview" id="product_list"></ul>  
        </div>
    </div>         
 </body>
 <script>

 var product = {
 "product": [
 {
  "product_name": "Product 1",
  "product_category": "1"
 },
 {
  "product_name": "Product 2",
  "product_category": "2"
 },
 {
  "product_name": "Product 3",
  "product_category": "3"
 }
 ]
 }

 $("#product_page").on("pageshow", function(event){
   var list = "";
   $.each(product, function(key, value){
      $.each(value, function(key, value){
        list += '<li><a href="category.html?product_category='+value.product_category+'" data-ajax="false">'+value.product_name+'</a></li>';
    })

    })    
     $("#product_list").html(list).trigger("create")
     $("#product_list").listview( "refresh" )
 })
</script>
<html>

category.html

<!DOCTYPE html>
<html>

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">  </script>
</head>

<body>    
    <div data-role="page" id="category_page">
       <div data-role="header" class=""></div>
       <div role="main" id="" class="ui-content">   
         <p id="detail"></p>
       </div>
    </div> 
</body>
<script>

$("#category_page").on("pageshow", function(event){
    var product_category = getParameterByName("product_category");
    $("#detail").html(product_category);    
})   
/** GET PARAMETER **/
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regexS = "[\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return results[1];
}
</script>
<html>

从多个 jquery 移动页面传递参数

passing parameter from multiple jquery mobile page

rest

mobile

jquery

json