dsj0312 2014-10-18 19:53
浏览 74
已采纳

来自mysql数据库的listview中的结果

Based on this topic: Changing the content of div in Jquery Mobile I want to retrieved data from mysql table using php and json but nothing is displayed in this operation.

Here are the information used:

json.php

$conexion = new mysqli("localhost", 'xxx', 'xxx', 'Operations');  

$query = "SELECT * FROM bugs";

$result = mysqli_query($conexion,$query);

while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {

    $id['projectid'] = $row['projectid'];
    $id['status'] = $row['status'];
    $id['severity'] = $row['severity'];
    $id['title'] = $row['title'];
    $id['creation_date'] = $row['creation_date'];

    array_push($result_array,$id);

}

echo json_encode($result_array);

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Bugs Administration</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
        $(document).live('pageinit',function (event) {
            $.ajax({
                url: 'http://127.0.0.1/app/json.php',
                data: "",
                dataType: 'json',
                success: function(data)        
                  {
                    for (var i = 0; i < data.length; i++) {
                      $('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
                                            "<b>Status: </b>"+ data[i].status+
                                            "<b>Severity: </b>"+ data[i].severity+
                                            "<b>Title: </b>"+ data[i].title+
                                            "<b>Creation Date: </b>"+ data[i].creation_date+
                                        "</li>"); 
                    }
                    $('#list').listview('refresh');

                 }
            });
        }); 
    </script>
</head> 
<body> 
<div data-role="page" id="bugs">
    <div data-role="header">
        <h1>List of Bugs</h1>       
    </div><!-- /header -->
    <div class="Main" data-role="content">  
        <h3>Current opened bugs</h3>       
        <ul data-role="listview" id="list"></ul>
    </div><!-- /content -->
    <div data-role="footer">
        <h3>Mobile App</h3>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

Actually this is the result:

enter image description here

What I'm doing wrong?

  • 写回答

1条回答 默认 最新

  • dongzhimeng2464 2014-10-18 20:21
    关注

    I think it's a cross domain issue, can you try to do your ajax call with a relative path if your index.html file is in the same folder as your json.php ?

    $.ajax({
    url: 'json.php',
    data: "",
    dataType: 'json',
    success: function(data)
    {
        for (var i = 0; i < data.length; i++) {
            $('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
                "<b>Status: </b>"+ data[i].status+
                "<b>Severity: </b>"+ data[i].severity+
                "<b>Title: </b>"+ data[i].title+
                "<b>Creation Date: </b>"+ data[i].creation_date+
                "</li>");
        }
        $('#list').listview('refresh');

    }
});

    Here is the full index.html code :

    <!DOCTYPE html>
<html>
<head>
    <title>Bugs Administration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <script>
        $(document).live('pageinit',function (event) {
            $.ajax({
                url: 'json.php',
                data: "",
                dataType: 'json',
                success: function(data)
                {
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        $('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
                            "<b>Status: </b>"+ data[i].status+
                            "<b>Severity: </b>"+ data[i].severity+
                            "<b>Title: </b>"+ data[i].title+
                            "<b>Creation Date: </b>"+ data[i].creation_date+
                            "</li>");
                    }
                    $('#list').listview('refresh');

                }
            });
        });
    </script>
</head>
<body>
<div data-role="page" id="bugs">
    <div data-role="header">
        <h1>List of Bugs</h1>
    </div><!-- /header -->
    <div class="Main" data-role="content">
        <h3>Current opened bugs</h3>
        <ul data-role="listview" id="list"></ul>
    </div><!-- /content -->
    <div data-role="footer">
        <h3>Mobile App</h3>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题