ajax实现简单的商品展示
|
昨天一个同学问我如何用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> </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'),'Microsoft YaHei';white-space:pre;"> array('pic'=>'09.gif','name'=>'吆喝','price'=>'32'),'Microsoft YaHei';white-space:pre;"> ); echo json_encode($arr); ?>
开始的时候:
点击按钮之后:
这就是这个demo的流程. 注意:在index.php的页面的js中,obj[i].name 这里的写法是固定的,第一层是for...in...循环的固定的写法,第二层是返回的信息的json对象的调用方法,这里不能写错. 当然方法也不止这一种,我们也可以在show.php的页面中,将要返回的的html元素直接组合成字符串,然后echo出来,两种方法都可以. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
