在 Jquery Mobile 中更改 div 的内容答案

【问题标题】：Changing the content of div in Jquery Mobile在 Jquery Mobile 中更改 div 的内容
【发布时间】：2012-09-25 02:20:11
【问题描述】：

我正在使用从 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 很陌生..

【问题讨论】：

你能澄清一下“列表标签”是什么意思吗？
通过列表标签我是指带有“列表” id 的 div 的内容..抱歉造成混淆:)
意思是你的目标是改变“id”和“name”标签？
不...我想从我从 mysql 数据库收到的数据中添加一个动态列表。在具有“列表”ID 的 div 容器中...

标签： mysql ajax jquery-mobile

【解决方案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 移动格式

【讨论】：

我的 json 返回一个数组 {"id":"1","name":"X","latitude":"0","longitude":"0","type" :"Y"} 其中我只使用 [0] 和 [1]th 部分，即 id 和 name ...然后我在我原来的 ajax 请求中使用它..但是 li 没有被附加..现在也是在脚本末尾添加了刷新..
您确定您的 php 返回格式正确的 JSON 数组吗？ IE。 [{"id":"1","name":"X"},{"id":"2","name":"X"},{"id":"3","name": "X"}]
正如您所建议的，我使用 return_arr,array fetch （您在上面提到过）将输出格式化为仅 [{"id":"1","name":"X"},{ "id":"2","name":"X"},{"id":"3","name":"X"}] .JSON 回复工作正常..问题在于仅附加到 li :)
您是否检查过您的成功函数确实在 JSON 数组上进行迭代？
这就是问题所在。它不会在成功函数中打印任何内容。但是 JSON 响应是正确的。我的成功函数成功：function(rows) { for(var i=0;iid:"+id+"Name:"+name+"") } };