很奇怪的js,ajax的问题,关于添加到购物车及点击删除的,就类似京东商城...

发布网友发布时间：2022-04-26 23:54

我来回答

共2个回答

懂视网时间：2022-05-02 11:56

做京东账户项目中的购物车模块，功能之一就是添加购物车。要用到的是Apach环境，Mysql、PHP以及Ajax。

预计效果：用户点击->“加入购物车” 添加成功已经2件

二、依据功能创建库、表、记录

创建库：jd

创建表：购物车表

技术分享

添加多条记录

小坑：购物车表注意尽量少的与产品表重复。只要有：哪个用户？买了哪个商品？买了几个？就够了。

小坑：小计，一般用程序计算，不写死。因为时间不同可能会有打折等变化出现，如果写死，则无法正确得出价格。

技术分享

/***购物车表***/
CREATE TABLE jd_cart(
 id  INT PRIMARY KEY AUTO_INCREMENT,
 uid INT,
 productid INT,
 count INT
);
INSERT INTO jd_cart VALUES(null,10,1,2);
INSERT INTO jd_cart VALUES(null,10,2,1);

三、创建php

①jd.sql ②init.php ③add_cart.php｛添加购物车｝

添加数据库

小坑：如果没买过某件商品，直接写1就好，但如果之前买过该商品，那要在之前的数据上加1。

1.查询是否购买商品 uid pid
SELECT * FROM jd_cart
WHERE uid = $uid AND pid = $pid;
返回值:null rows

2.没有购买过该商品
INSERT INTO jd_cart VALUES(null,$uid,$pid,1);

3.已经购买过该商品
UPDATE jd_cart SET count=count+1
WHERE uid=$uid AND $pid;

返回字符串 1 购买1个商品

3 购买3个商品

<?php
 header("Content-Type:text/plain;charset=utf-8");
 @$uid = $_REQUEST[‘uid‘]or die("-1");
 @$pid = $_REQUEST[‘pid‘]or die("-2");
 require("init.php");

 $sql = "SELECT * FROM jd_cart WHERE uid=$uid AND productid=$pid";
 $result = mysqli_query($conn,$sql);
 $row = mysqli_fetch_assoc($result);
 $count = 0;
 if($row===null){//如果不存在，添加记录
 $sql = "INSERT INTO jd_cart VALUES(null,$uid,$pid,1)";
 $result = mysqli_query($conn,$sql);
 $count = 1;
 }else{//如果存在，更新记录
 $sql = "UPDATE jd_cart SET count=count+1 WHERE uid=$uid AND productid=$pid";
 $result = mysqli_query($conn,$sql);
 $count = $row[‘count‘]+1;
 }
 echo $count;//输出购买数量
?>

<?php
 $conn = mysqli_connect("127.0.0.1","root","","jd",3306);
 mysqli_query($conn,"SET NAMES UTF8");
?>

测试

http://127.0.0.1/jd_store/data/add_cart.php?uid=10&pid=1 返回 3

http://127.0.0.1/jd_store/data/add_cart.php?uid=10&pid=10 返回 1

数据库

技术分享

三、创建js｛分析html/css｝

①productlist.html

②js/productlist.js

③js

技术分享

小坑：Ajax动态生成的不能直接绑定，因为绑定时这个对象还不存在，要先找一个已存在的元素委托代理。

 /***添加购物车***/
 $("$plist").on(‘click‘,"a.addcart",function(e){
 e.preventDefault();
 var pid = $(this).attr("href");
 alert(pid);
 });

全部代码：

/***添加购物车***/
 $("#plist").on(‘click‘,‘a.addcart‘,function(e){
 e.preventDefault();
 var pid = $(this).attr("href");
 //把当前登录用户编号+商品编号
 //发送ajax请求给服务器，执行添加操作
 $.ajax({
  ‘type‘:‘POST‘,
  ‘url‘:‘data/add_cart.php‘,
  data:{uid:10,pid:pid},
  success:function(data){
  if(data>0){
   alert("添加成功！该商品已购买"+data);
  }else{
   alert("添加失败");
  }
  },
  error:function(){
  alert("添加商品出错，请检查网络!");
  }
 });
 });

正常实现：

技术分享

关闭服务器：

技术分享

【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

标签：执行请求项目 table 购物车动态关闭技术分享 cti

热心网友时间：2022-05-02 09:04

初步怀疑你的删除事件绑定有问题：新加入的DOM元素未绑定到事件。这种情况应该使用事件委派来做，你用 jQuery 吗？假设你的购物车列表的 HTML 结构如下：

<ul id="cartList">
    <li>
        购物车商品1
        <button>删除</button>
    </li>
    <li>
        购物车商品2
        <button>删除</button>
    </li>
    ……
</ul>

则删除购物车商品的代码为（用了 jQuery）：

$('#cartList').on('click', 'button', function() { // 委派 button 的点击事件
$(this).parent().remove(); // 移除购物车里当前商品
});

追问对的，就是事件绑定的问题，我没用each循环找元素，而是在元素标签上写onclick(this).就解决了。谢大神了。