ajax实现简单的商品展示

页面导航:首页 > 软件编程 > Java编程 > ajax实现简单的商品展示

ajax实现简单的商品展示

来源: 作者: 时间:2016-01-21 09:39 【

昨天一个同学问我如何用ajax获取后台php文件传输过来的多个商品的信息,其实php后台返回的一个数组,我们可以通过json_encode讲这个数组变成json字符串,然后在前台页面的js中我们通过eva(
昨天一个同学问我如何用ajax获取后台php文件传输过来的多个商品的信息,其实php后台返回的一个数组,我们可以通过json_encode讲这个数组变成json字符串,然后在前台页面的js中我们通过eva()在将其转换成json对象,然后就可以使用'.'进行调用了.但是多个物品我们如何进行遍历呢.
 
    下面是自己写的一个demo:目录结构为(页面->index.php,php后端->show.php,还有三张测试图片)
 
    页面:index.php(js也在里面)
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="source/jquery.js"></script> 
<style>
.mypic{
width:66px;
height:200px;
overflow:hidden;
float: left;
}
p{
height:15px;
}
</style>
</head>
<body>
<button class='mybtn'>点击</button>
<div id="info">
<div class='mypic'> <!--这里是展现的样式-->
<img src="">
<p>名称:</p>
<p>价格:</p>
</div>
</div>
</body>
<script>
$('.mybtn').click(function(){ 
var str='';
$.post('show.php',function(data){  //ajax开始,只是测试,所以没有传值
var obj=eval('('+data+')'); //返回json对象
for(var i in obj)  //利用for...in...循环便利对象
{
str+="<div class='mypic'>";

str+="<img src='"+obj[i].pic+"'><p style='color:#0f0'>"+obj[i].name+"                                              </p><p style='color:#f00'>$"+obj[i].price+"</p>";

str+="</div>";
}
$("#info").html(str); //将str注入到div内部
});
});
</script>
</html>

    show.php
        //作为测试 模拟了一个通常在里面取出的数据的形式(二维数组)
<?php 
$arr=array(
array('pic'=>'07.gif','name'=>'观察','price'=>'50'),
array('pic'=>'08.gif','name'=>'瞪眼','price'=>'14'),
array('pic'=>'09.gif','name'=>'吆喝','price'=>'32'),
);
echo json_encode($arr);
 ?>

 


Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <