用php代码实现如何改写为使用js\html代码实现功能？

cyr_cuc

1、原有代码为php+html+js+css 混合编写。2、实现功能为：查询product数据库中cat=1的数据--->对符合要求数据进行while循环{1、创建一个id为result['id']的<div>.2、在该div中再进行查询，即将id='$th' and cat='1'的数据查询出来。3、展现该数据。}
3、目前已能实现json读取服务端数据库，并在客户端进行展示。但是还是不知道怎么具体运用数据，特别是<div id="a<?php echo $result['id']; ?>" class="con1">这句不知道怎么改写。
问题比较低级～希望有大神帮帮忙呀

1. <?php
   
2.                 $conn = "SELECT * FROM product where cat='1'";
   
3.             $arry = mysql_query($conn);
   
4.             while($result=mysql_fetch_array($arry) ){
   
5.                 ?>
   
6.                   <div id="a<?php echo $result['id']; ?>" class="con1">
   
7. <?php
   
8.                                 $th=$result['id'];
   
9. ?>
   
10. <ul id="siz" align=center>
    
11.             <?php
    
12.                 $conn = "select*from product where id='$th' and cat='1'";
    
13.             $arr = mysql_query($conn);
    
14.             $result=mysql_fetch_array($arr);
    
15.                         ?>
    
16.             <li><b><?php echo $result['title'];?></b><br><br>
    
17.             <p>播出时间：<?php echo $result['time'];?>  时长：<?php echo $result['length'];?></p><br>
    
18.             <video id="myVideo" controls poster="video.jpg" width="300" height="250" >
    
19.                     <source src="../video/<?php echo $result['name']; ?>" type="video/mp4" />
    
20.                     <p>Your browser does not support the video tag.</p>
    
21.                         </video><?php echo $result['content'];?></li>      
    
22.             </ul>  
    
23.         </div>

复制代码

jankerli

如果觉得append里面有一堆的html标签代码，那么可以尝试使用一些js库的模板功能，如underscore.js的_.template()

你懂的

可以用ajax实现  js请求服务器接口  返回一段json数据  然后用js循环出数据内容

cyr_cuc

测试一把 发表于 2015-3-13 17:44
可以用ajax实现  js请求服务器接口  返回一段json数据  然后用js循环出数据内容 ...

您好～我已经用jquery的ajax函数实现了返回一段json数据，但是整段代码多处要用到json数据，难道那一大段代码都要写在ajax函数的success: function(json){}里面？

跨平台移动开发

你也可以封装一下ajax请求函数的，不过正常都是这样写的啊，可以用js面相对象的写法

cyr_cuc

跨平台移动开发 发表于 2015-3-13 20:10
你也可以封装一下ajax请求函数的，不过正常都是这样写的啊，可以用js面相对象的写法 ...

您好，感谢您的回答。我JS才上手...对JS面向对象写法不是很懂。我自己写了一段JS代码好像能实现上面php功能，但是感觉很累赘，不知有没简洁一点的方法～谢谢。

1. <script type="text/javascript">
   
2.       jQuery(document).ready(function(){
   
3.          $.ajax({
   
4.               type: "get",
   
5.               async: false,
   
6.               url: "outer.php",
   
7.               dataType: "json",
   
8.               jsonp: "callback",            
   
9.               success: function(json){              
   
10.                 $.each(json,function(index,obj){
    
11.            $("#jjftdiv").append("<div id='b"+obj.id+"' class='con2'><div class='toolbar'><div class='back-to-top'><a href='#top'><span></span><img src='images/top.png' style='height:50px; width:50px; margin-right:-50px;margin-bottom:-20px'></a></div><a href='#jjft'><img src='images/top_jmnr.jpg' style='max-height:200px; max-width:200px; margin-left:-5px; margin-top:-2px'></a><a class='button back' href='#'></a></div><ul id='jjftsiz' align=center></ul><li><b>"+obj.title+"</b><br><br><p>播出时间："+obj.time+"&nbsp;&nbsp;时长："+obj.length+"</p><br><video id='myVideo' controls poster='video.jpg' width='300' height='250' ><source src='video/"+obj.name+"' type='video/mp4' /><p>Your browser does not support the video tag.</p></video><span align=left>"+obj.content+"</span></li></div>");
    
12.                 });               
    
13.              },
    
14.              error: function(){
    
15.                 alert('fail');
    
16.              }
    
17.          });
    
18.      });
    
19.     </script>

复制代码

admin

cyr_cuc 发表于 2015-3-13 20:39
您好，感谢您的回答。我JS才上手...对JS面向对象写法不是很懂。我自己写了一段JS代码好像能实现上面php功 ...

js  for循环 或者foreach循环一下就好了 就没有这么多代码了

cyr_cuc

admin 发表于 2015-3-13 23:38
js  for循环 或者foreach循环一下就好了 就没有这么多代码了

您好，我在success:fuction函数里面已经有一个each循环循环，我想append函数里应该添加不了循环了.......或者，是我还没明白您的意思？谢谢～

你懂的

cyr_cuc 发表于 2015-3-14 10:58
您好，我在success:fuction函数里面已经有一个each循环循环，我想append函数里应该添加不了循环了....... ...

就是循环的时候把数据记录下来 然后在一起append

cyr_cuc

测试一把 发表于 2015-3-18 13:03
就是循环的时候把数据记录下来 然后在一起append

好的，谢谢您的回答～