Question

我正在使用JQM 1.0.1构建应用程序。我有一个查询，向JSON输出一个城市列表以及每个城市有多少商店用于特定类型的商店。我有几种商店类型：机械，轮胎，油漆和车身等。我对每种车型都有不同的询问。在我的移动应用程序的第一页上，我列出了不同的商店类型，在商品类型页面上，我使用ajax列出了每个城市的城市和商店数量。我想通过从第一页上每个商店类型的列表中传递参数来更改ajax网址。这样我就可以动态加载正确的查询，而不是为此设置多个页面。

查询示例：

$query= "SELECT City, COUNT(ShopId) AS count FROM tabel WHERE Shoptype = 'D' and Visible = 1 Group By `City`";

第一页：

<div data-role="page" id="shopType" data-add-back-btn="true">
<div data-role="header" class="heading">
    <h1></h1>
</div>
<div data-role="content">
 <div class="choiceList">
        <h1>Choose a shop type</h1>
 </div> 
    <ul data-role="listview" class="mainmenu">
        <li><a href="#shopType.html" id="diesel" data-transition="slide">Diesel Repair</a></li>
        <li><a href="shopType.html"  data-transition="slide">Mechanical</a></li>
        <li><a href="shopType.html" data-transition="slide">Paint and Body</a></li>
        <li><a href="shopType.html" data-transition="slide">Tires</a></li>
        <li><a href="shopType.html" data-transition="slide">Transmission</a></li>
    </ul>       
</div>
<div data-role="footer">
    <h4><script type="text/javascript">
    var d = new Date();
    document.write('<span class="copyright">© ' + d.getFullYear() + ' </span>');
    </script> </h4>
</div>

第二页（shopType.html）

<div id="city" data-role="page"  data-add-back-btn="true">
<div data-role="header"></div>

<div data-role="content">
<div class="choiceList">
<ul data-role="listview" id="cityMenu" class="mainmenu"></ul>

<script>
    jQuery(function() {
        $.ajax({
            url: 'includes/typeD.php',
            processData: true,
            data:{},
            dataType:'json',
            success: function(json) {
                $.each(json.shops, function(i, dat){
                    var count = dat.count;
                    var city = dat.City;
                    $("#cityMenu").append('<li><a href="#">' + city + '<span class="ui-li-count">' + count + '</span></a></li>');
                });
                $("#cityMenu").listview("refresh");
            },
            error: function(x,y,z) {}
        });
    });

</script>
</div>
</div>

</div>

使用上一个jquery移动页面中的参数更改ajax url

0 个答案: