更改格在jQuery Mobile的内容内容、jQuery、Mobile
我是用从MySQL接收到的数据，然后试图使从该数据的列表。 这是我的connection.php
I am using the data received from mysql and then trying to make a list from that data. Here is my 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
Here is my 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);
//}
?>
和这里是code
<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>©AmeyPat.All Rights Reserved.</h1>
</div><!-- /footer -->
</body>
</html>
我怎样才能改变的只是列表tag..I内容很新的jQuery Mobile的..
How can i change the content of just the list tag..I am very new to jquery mobile..
推荐答案
首先，你会想要确保你的PHP返回格式正确的JSON，在这种情况下将{ID阵列：1，名称： 姓名}对象。你可以看看此页实例。你会得到像
First, you will want to make sure that your php returns a properly formatted JSON, which in this case would be an array of {id:1,name:"Name"} objects. You can take a look at this page for instance. You would get something like
$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的列表视图，你应该改变＆LT; DIV数据角色=内容ID =清单＆GT; 到＆LT; UL数据角色=列表视图ID =清单与GT;
On the client side, if you want to benefit from jquery mobile listviews, you should probably change <div data-role="content" id="list"> to <ul data-role="listview" id="list">.
那么，你应该考虑将您的js code的头，并将其绑定到一个 pageinit 事件。
Then, you should think about moving your js code to the header, and binding it to a pageinit event.
您还需要修改你的成功的功能遍历数组的元素添加到列表中。
You will also need to modify your success function to iterate through the array and add the elements to your list.
$(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中）的列表视图列表视图（刷新）; 给它适当的jQuery Mobile的格式
You might then need to refresh the listview with $('#mylist').listview('refresh'); to give it the proper jquery mobile formatting
