ajax实现简单的商品展示
admin
2023-06-25 00:22:16
0

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


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


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

    

Document

名称:

价格:


    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);

 ?>


测试结果:


 开始的时候:

ajax实现简单的商品展示


 点击按钮之后:

ajax实现简单的商品展示

   

这就是这个demo的流程.

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


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

相关内容

热门资讯

AI牵手能源,会擦出怎样的火花... (来源:中国电力新闻网) 转自:中国电力新闻网 AI牵手能源,会擦出怎样的火花? ——国家能源集团“...
时政微观察丨创新之道 唯在得人 5月25日,中国航天太空“全家福”再上新——神舟二十三号航天员乘组顺利进驻“天宫”,与神舟二十一号航...
机器人“亮绝活”!2026世界... 5月28日至31日,以“智行天下 能动未来”为主题的2026世界智能产业博览会(以下简称智博会)在国...
人走断电技术**能源浪费难题—... 一、行业背景:用电管理的三大**痛点 在办公楼宇、建筑工地、学校宿舍等公共用电场景中,能源浪费与安全...
特朗普:伊朗浓缩铀材料将被挖出... △白宫(资料图)当地时间5月29日,美国总统特朗普说,伊朗浓缩铀材料将由美国与伊朗以及国际原子能机构...
视频丨《城市更新“十五五”规划... 国务院日前印发了《城市更新“十五五”规划》,明确了“十五五”时期城市更新工作的目标指标、重点任务、重...
加推再现争抢!通派龙湖·御潮云... 2026年郑州楼市,如果要选出一个现象级红盘,通派龙湖·御潮云上必定首屈一指!自2月首开劲销2.8亿...
神舟二十一航天员张洪章出舱,谈... 据凤凰卫视报道,北京时间2026年5月29日20时11分,神舟二十一号航天员乘组搭乘神舟二十二号载人...
神二十一航天员张陆出舱,从太空... 据凤凰卫视报道,神舟二十一号航天员乘组5月29日乘坐神舟二十二號载人飞船返回地球。北京时间20时11...
5月30日、31日晚8点来京东... 又好又便宜的京东618将于5月30日晚8点正式开启,全品类现货开卖。5月30日、31日每晚8点,消费...