在Jquery Mobile中更改div的内容

Question

我正在使用从mysql收到的数据，然后尝试从这些数据中创建一个列表。这是我的connection.php

 <?php
    $dbhost='localhost';
    $dbuser='amey19_amey';
    $dbpass='project';
    $db='amey19_project';
    $conn=mysql_connect($dbhost,$dbuser,$dbpass) or die("Could not connect");
    mysql_select_db($db);
    ?>

这是我的index1.php

 <?php
    include 'connection.php';
    $query="SELECT * from railway";

    $result=mysql_query($query) or die(mysql_error());
    //while($person=mysql_fetch_array($result)){
    $person=mysql_fetch_array($result)
    echo json_encode($person);


    //}
    ?>

下面是代码

    <html> 
        <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">    </script>
        <script type="text/javascript" src="global.js">
        </script>

    </head> 
    <body> 

    <div data-role="page" id="page1">

        <div data-role="header">
            <h1>Railway Station</h1>
        </div><!-- /header -->


        <div data-role="content">
        <input type="button" value="Refresh" id="submit" data-icon="refresh" /></br>
        <div data-role="content" id="list"> 
    <script id="source" language="javascript" type="text/javascript">

      $(function () 
      {

    $.ajax({                                      
      url: 'index1.php',                 
      data: "",                       

      dataType: 'json',              
      success: function(data)        
      {
        var id = data[0];            
        var vname = data[1];          

        $('#list').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 

      } 
    });
      }); 

  </script>


    </div>
    </div>
    <div data-role="footer">
            <h1>&copy;AmeyPat.All Rights Reserved.</h1>
        </div><!-- /footer -->




    </body>
    </html>

如何更改列表标签的内容..我对jquery mobile非常陌生..

Answer 1

首先，您需要确保php返回一个格式正确的JSON，在本例中是一个{id:1，name:"Name"}对象数组。例如，您可以看看this page。你会得到像这样的东西

$fetch = mysql_query("SELECT * from railway"); 

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
  $row_array['id'] = $row['id'];
  $row_array['name'] = $row['name'];

  array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

在客户端，如果您想从jquery mobile listviews中获益，您可能应该将<div data-role="content" id="list">更改为<ul data-role="listview" id="list">。

然后，您应该考虑将js代码移动到头部，并将其绑定到pageinit事件。

您还需要修改成功函数，以迭代数组并将元素添加到列表中。

$(document).live('pageinit',function (event) {
    $.ajax({
        url: 'index.php',
        data:"",
        dataType: 'json',
        success: function(data)        
          {
            for (var i = 0; i < data.length; i++) {
              $('#list').append("<li><b>id: </b>"+ data[i].id +"<b> name: </b>"+ data[i].name + "</li>"); 
            }
         }
    });
}); 

然后，您可能需要使用$('#mylist').listview('refresh');刷新列表视图，以便为其提供适当的jquery移动格式