Question

jquery移动列表视图加载json数据不起作用请帮帮我

我创建了php代码来编写json文件，我正在尝试将json数据加载到我的jquery移动列表视图但是它没有加载

crome控制台错误是：“未捕获的ReferenceError：json未定义”

请解决此问题

我的jquery mobile index.html代码是

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

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

<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>


<link href="css/mystyles.css" rel="stylesheet" type="text/css"/>
<script src="js/myscript.js" type="text/javascript"></script>



</head>
<body>

<div data-role="page" id="cat">
    <div data-role="header" data-position="fixed">
        <h1>Categories</h1>
    </div>
    <div data-role="content">   
        <ul id="list" data-role="listview">

        </ul>       
    </div>


     <script type="text/javascript">

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


                var url="http://localhost:8888/coupns/index.php";

                $.getJSON(url,function( data ){
                    //loop through deals
                    $.each(json.posts,function(i,dat){
                        $("#list").append("<li><b>ID: </b>"+dat.id+
                                          "<b> Name: </b>"+dat.shop+
                                          "<b> Description: </b>"+dat.dec+
                                          "<b> Limit: </b>"+dat.cat+
                                          "<b> Rest ID </b>"+dat.expdate+
                                          "</li>");
                     });
                     $("#list").listview('refresh');
                });
             });
        </script>



    <div data-role="footer" data-position="fixed">      
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">Categories</a></li>
            <li><a data-icon="grid" href="#bys">By Shop</a></li>

        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->







</div>

<div data-role="page" id="bys">
    <div data-role="header" data-position="fixed">
        <h1>By Shop</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a href="#page2">Page Two</a></li>

        </ul>       
    </div>

    <div data-role="footer" data-position="fixed">      
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a data-icon="grid" href="#cat">Categories</a></li>
            <li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">By Shop</a></li>

        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

</div>

</body>
</html>

我的php json编码是

 <?php


$con=mysqli_connect("localhost","root","root","coupns");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM coupns");


$posts = array();
    if(mysqli_num_rows($result)) {
        while($post = mysqli_fetch_assoc($result)) {
            $posts[] = array('post'=>$post);
        }
    }

header('Content-type: application/json');

echo json_encode(array('posts'=>$posts));

?>

我的json数据输出是

{"posts":[{"post":{"id":"1","shop":"ebay.in","cat":"online shopping all ","expdate":"2013-06-30","dec":"Credit Card\t 6% Off!\tUse Coupon Code:\r\nCHDFCEBAY1"}}]}

Answer 1

$.each(json.posts,function(i,dat){这应该是$.each(data.posts,function(i,dat){

jquery列表视图加载json数据不起作用请帮帮我

1 个答案: