2

我无法使用从 mySQL 本地数据库呈现的数据来呈现 Jquery 列表。json数据很好地连接到项目，但我的模拟器呈现给我的内容不正确。

我的 php 文件是：

<?php

$link = mysql_pconnect("localhost", "root", "") or die ("Could not Connect to DB");

mysql_select_db("findadeal") or die("Could not select database");

$arr = array();

$rs = mysql_query("SELECT * FROM deal");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"Deals":'.json_encode($arr).'}';

?>

这会呈现以下 JSON 结果：

{"Deals":[{"dealid":"1","name":"Set Lunch Menu","description":"Enjoy lunch ","limit":"10","restaurantid":"1"}]}

我的 HTML 代码如下：

<!DOCTYPE html>
<html>

<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
    img.fullscreen {
        max-height: 100%;
        max-width: 100%;
    }
    </style>

<link rel="stylesheet" href="themes/deal.css" />
<link rel="stylesheet"         href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


</head>

<body>
<div data-role = "content">

   <div data-role="header" data-position="fixed">
            <h1>Current Deals</h1>
            </div>

  <div class="content-primary">
     <ul id="list" data-role="listview" data-filter="true"></ul>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">            </script>

<script type="text/javascript">

    $(document).ready(function(){

                      var url="http://localhost/findadeal/json2.php";

                      $.getJSON(url,function(json){
                                //loop through deals
                                $.each(json.deals,function(i,dat){
                                       $("#list").append("<li><b>ID: </b>"+dat.dealid+
                                                         "<b> Name: </b>"+dat.name+
                                                         "<b> Description: </b>"+dat.description+
                                                         "<b> Limit: </b>"+dat.limit+
                                                         "<b> Rest ID </b>"+dat.restaurantid+
                                                         "</li>");
                                       });
                                });
                      });

    </script>

<footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
        <ul>
            <li><a href="index.html" data-icon="home">Home</a></li>
            <li><a href="mydeal.html" data-icon="grid">My Deals</a></li>
        </ul>
    </nav>
  </footer>

 </body>
</html>

当我不添加动态数据时，我可以很好地呈现一般列表视图，但是现在出现了问题。

如果有人可以帮助我，我将不胜感激！！在过去的几天里，我遇到了很多困难，这里的人们真的帮了我很多，所以我很感激你的所有时间！提前致谢！！

4

1 回答 1

3

这应该被删除：

 $(document).ready(function(){

（这种语法不能与 一起使用jQuery Mobile，如果您想了解更多信息，请查看此文章或查看此处。）。一切都应该更改为在页面成功加载时运行，但页面也需要包装页面内容，data-role="page"所以这样做：

<div data-role = "page" id="index">
    // Your body content should go here
</div>

由于此更改$(document).ready(function(){ 为：

$(document).on('pagebeforeshow', '#index', function(){

附加内容时listview()必须触发功能以增强内容标记：

$("#list").listview('refresh');

如果您想了解有关如何处理动态添加jQuery Mobile的内容的更多信息，请查看这篇文章，更透明的是我的个人博客。或者你可以在这里找到它。

我也不知道为什么，但你引用了 2 个jQuery脚本，你应该删除这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">            </script>

当前jQuery Mobile不适用于 jQuery 1.9，仅使用 1.8.3 或更低版本。

一切都应该是这样的：

<html>
    <meta charset="utf-8" />
    <title>Find A Deal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>

<body>
    <div data-role="page" id="index">
        <div data-role="header" data-position="fixed">
           <h1>Current Deals</h1>
        </div>

        <div data-role = "content">
              <div class="content-primary">
                 <ul id="list" data-role="listview" data-filter="true"></ul>
              </div>
        </div>

        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#index', function(){ 
                var url="http://localhost/findadeal/json2.php";
                $.getJSON(url,function(json){
                    //loop through deals
                    $.each(json.deals,function(i,dat){
                        $("#list").append("<li><b>ID: </b>"+dat.dealid+
                                          "<b> Name: </b>"+dat.name+
                                          "<b> Description: </b>"+dat.description+
                                          "<b> Limit: </b>"+dat.limit+
                                          "<b> Rest ID </b>"+dat.restaurantid+
                                          "</li>");
                     });
                     $("#list").listview('refresh');
                });
             });
        </script>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home">Home</a></li>
                    <li><a href="mydeal.html" data-icon="grid">My Deals</a></li>
                </ul>
            </div>
        </div>
    </div>
 </body>
</html>
于 2013-01-31T13:11:54.157 回答