ajax实现简单的商品展示-创新互联
昨天一个同学问我如何用ajax获取后台php文件传输过来的多个商品的信息,其实php后台返回的一个数组,我们可以通过json_encode讲这个数组变成json字符串,然后在前台页面的js中我们通过eva()在将其转换成json对象,然后就可以使用'.'进行调用了.但是多个物品我们如何进行遍历呢.
成都创新互联公司是专业的沙县网站建设公司,沙县接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沙县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!下面是自己写的一个demo:目录结构为(页面->index.php,php后端->show.php,还有三张测试图片)
页面:index.php(js也在里面)
.mypic{
width:66px;
height:200px;
overflow:hidden;
float: left;
}
p{
height:15px;
}
名称:
价格:
$('.mybtn').click(function(){
var str='';
$.post('show.php',function(data){ //ajax开始,只是测试,所以没有传值
var obj=eval('('+data+')'); //返回json对象
for(var i in obj) //利用for...in...循环便利对象
{
str+="
str+="
"+obj[i].name+"
$"+obj[i].price+"
";str+="
}
$("#info").html(str); //将str注入到div内部
});
});
show.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出来,两种方法都可以.
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:ajax实现简单的商品展示-创新互联
URL标题:http://pwwzsj.com/article/hhspj.html