ajax实现简单的商品展现

时间 2020-08-28

标签 ajax 实现简单商品展现栏目 Ajax 繁體版

原文原文链接

昨天一个同窗问我如何用ajax获取后台php文件传输过来的多个商品的信息,其实php后台返回的一个数组,咱们能够经过json_encode讲这个数组变成json字符串,而后在前台页面的js中咱们经过eva()在将其转换成json对象,而后就能够使用'.'进行调用了.可是多个物品咱们如何进行遍历呢.
php

下面是本身写的一个demo:目录结构为(页面->index.php,php后端->show.php,还有三张测试图片)html

页面:index.php(js也在里面)
jquery

<!DOCTYPE html>ajax

<html lang="en">数据库

<head>json

<title>Document</title>数组

<style>post

.mypic{

width:66px;

height:200px;

overflow:hidden;

float: left;

}

height:15px;

}

</style>

</head>

<body>

</div>

</body>

$('.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出来,两种方法均可以.