PhoneGap中文网

标题: 用php代码实现如何改写为使用js\html代码实现功能？ [打印本页]

作者: cyr_cuc 时间: 2015-3-13 17:34
标题: 用php代码实现如何改写为使用js\html代码实现功能？
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">这句不知道怎么改写。
问题比较低级～希望有大神帮帮忙呀

<?php
$conn = "SELECT * FROM product where cat='1'";
$arry = mysql_query($conn);
while($result=mysql_fetch_array($arry) ){
?>
<div id="a<?php echo $result['id']; ?>" class="con1">
<?php
$th=$result['id'];
?>
<ul id="siz" align=center>
<?php
$conn = "select*from product where id='$th' and cat='1'";
$arr = mysql_query($conn);
$result=mysql_fetch_array($arr);
?>
<li><b><?php echo $result['title'];?></b><br><br>
<p>播出时间：<?php echo $result['time'];?> 时长：<?php echo $result['length'];?></p><br>
<video id="myVideo" controls poster="video.jpg" width="300" height="250" >
<source src="../video/<?php echo $result['name']; ?>" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video><?php echo $result['content'];?></li>
</ul>
</div>

复制代码

作者: 你懂的 时间: 2015-3-13 17:44
可以用ajax实现 js请求服务器接口返回一段json数据然后用js循环出数据内容

作者: cyr_cuc 时间: 2015-3-13 18:42

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

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

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

作者: cyr_cuc 时间: 2015-3-13 20:39

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

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

<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "outer.php",
dataType: "json",
jsonp: "callback",
success: function(json){
$.each(json,function(index,obj){
$("#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+"  时长："+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>");
});
},
error: function(){
alert('fail');
}
});
});
</script>

复制代码

作者: admin 时间: 2015-3-13 23:38

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

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

作者: cyr_cuc 时间: 2015-3-14 10:58

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

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

作者: 你懂的 时间: 2015-3-18 13:03

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

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

作者: jankerli 时间: 2015-3-18 17:05
如果觉得append里面有一堆的html标签代码，那么可以尝试使用一些js库的模板功能，如underscore.js的_.template()

作者: cyr_cuc 时间: 2015-3-21 20:47

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

好的，谢谢您的回答～

作者: cyr_cuc 时间: 2015-3-21 20:47

jankerli 发表于 2015-3-18 17:05
如果觉得append里面有一堆的html标签代码，那么可以尝试使用一些js库的模板功能，如underscore.js的_.templ ...

好的，非常感谢您的回答～

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)

Powered by Discuz! X3.2