ajax实现简单的商品展示
更新:HHH   时间:2023-1-7


昨天一个同学问我如何用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);

 ?>


测试结果:


 开始的时候:


 点击按钮之后:

   

这就是这个demo的流程.

    注意:在index.php的页面的js中, obj[i].name 这里的写法是固定的,第一层是for...in...循环的固定的写法,第二层是返回的信息的json对象的调用方法,这里不能写错.


    当然方法也不止这一种,我们也可以在show.php的页面中,将要返回的的html元素直接组合成字符串,然后echo出来,两种方法都可以.

返回web开发教程...