使用javascript和json从数据库中显示html5中的listview数据

时间:2016-12-15 10:20:17

标签: javascript json html5 listview

使用java脚本和json在数据库中显示html5中的列表视图数据。点击列表视图是显示详细信息。我可以制作节目列表视图但不能显示详细信息。改变页面。列表视图1页,详细信息1页。

这是代码运行成功。但不能显示详细信息。



   $(function() {

   var people = [];
   var json = "your url";       
	
   $.getJSON(json, function(json1) {
       $.each(json1, function(key, data) {    		 
		   
   		 $('#myUL').append('<li data-id="' + data.VendorCode + '"><a href="#"><img src="http://Order%20Custumer/images/'+data.VendorCode+'.png"/><h3 style="color:#FFCC00">' + data.LocalDesc + '</h3><p style="color:#FF9">' + data.EngDesc + '</p></a></li>');
        });
		
        $('#myUL').listview('refresh');    
   });
});
&#13;
<!DOCTYPE HTML>
<!--
	Intensify by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
	<head>
		<title>Salad Lovers</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>    
  
<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

在标记之前在您的HTML文件中包含Jquery库并尝试运行它。

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您的HTML文件似乎是:

<!DOCTYPE HTML>
<!--
    Intensify by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
    <head>
        <title>Salad Lovers</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>



<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>