django开发电子商城(十四)Ajax上

1:浏览器中打开https://unpkg.com/[email protected]/dist/axios.js,复制返回的内容,并将内容存到文件axios.js中,并将该文件复制到工程的js目录下。

2:在前端页面course_shopcart.html中导入axios.js文件,具体操作如下:


django开发电子商城(十四)Ajax上_第1张图片

3:在course_shopcart.html中增加请求商品数据的代码


django开发电子商城(十四)Ajax上_第2张图片

4:在api.py中增加根据cookie获取商品信息列表的接口代码


django开发电子商城(十四)Ajax上_第3张图片

5:在应用下的urls.py中增加路由


django开发电子商城(十四)Ajax上_第4张图片

6:修改add_to_shopcart.html页面,增加“去购物车结算”的链接


django开发电子商城(十四)Ajax上_第5张图片

7:将axios请求到的数据,赋值到products


django开发电子商城(十四)Ajax上_第6张图片

8:修正返回数据的格式,返回的数据增加商品id


django开发电子商城(十四)Ajax上_第7张图片

9:修改course_shopcart.html,在返回数据中增加商品ID和商品对应的图片


django开发电子商城(十四)Ajax上_第8张图片

10:修改商品显示链接,显示对应商品的图片链接


django开发电子商城(十四)Ajax上_第9张图片

你可能感兴趣的:(django开发电子商城(十四)Ajax上)