来自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?

答

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>

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

相关推荐