【问题标题】:Results in listview from mysql databasemysql数据库中的listview结果
【发布时间】:2014-10-18 19:53:31
【问题描述】:

基于此主题:Changing the content of div in Jquery Mobile我想使用php和json从mysql表中检索数据,但此操作中没有任何显示。

以下是使用的信息:

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>

其实结果是这样的:

我做错了什么?

【问题讨论】:

  • 您的 ajax 调用在您的控制台中返回什么(在大多数浏览器中为 F12)?
  • 未捕获的类型错误:无法读取 null index.html:17$.ajax.success index.html:17 的属性“长度”
  • 你能在echo json_encode($result_array); 之前var_dump($result_array); 并检查调用是否在您的控制台浏览器中返回行(如果您使用chrome,它将在网络面板中)?
  • 你可以顺便检查这个url:http://127.0.0.1/app/json.php,不需要通过你的ajax调用来检查var_dump
  • array (size=1) 0 => array (size=5) 'projectid' => string '2' (length=1) 'status' => string '1' (length=1 ) 'severity' => string '0' (length=1) 'title' => string '表单提交期间出现异常' (length=26) 'creation_date' => string '2014-10-14' (length= 10)

标签: php android jquery mysql json


【解决方案1】:

我认为这是一个跨域问题,如果您的 index.html 文件与您的 json.php 位于同一文件夹中,您可以尝试使用相对路径进行 ajax 调用吗?

$.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');

    }
});

这里是完整的 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: '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>

【讨论】:

  • 我添加了这个警报(数据),应用程序响应为空,所以调用有问题
  • 你的 json.php 文件和你的 index.html 文件在同一个文件夹中吗?
  • 这很奇怪,因为当我在家里尝试这段代码时,它就像一个魅力,我得到了你所期望的结果。我编辑我的代码以分享完整的代码。
  • 如果ajax调用不起作用,你能告诉我它的HTTP响应代码吗?您会在 Chrome 控制台的网络面板中看到它。
  • 真的,这里有问题:for (var i = 0; i
猜你喜欢
  • 1970-01-01
  • 2017-08-30
  • 1970-01-01
  • 1970-01-01
  • 2020-05-01
  • 1970-01-01
  • 2018-03-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多