weixin_44257646 2018-12-25 10:17 采纳率: 0%
浏览 894

模拟购物车功能实现页面,求助

已选商品（不含运费）  0.00 结 算
全选
商品信息
单价
数量
金额
操作
""
全选
已选商品 0 件
合计（不含运费）：  0.00 
//这个是js页面的代码














        ![图片说明](https://img-ask.csdn.net/upload/201812/25/1545703444_328325.png)



![图片说明](https://img-ask.csdn.net/upload/201812/25/1545703444_328325.png)

$(function () {

var s=$(".i1").val();
$(document).on(".k").click(function () {
$(this).css("background-color", "#f40");

});
$(document).on(".qx").click(function () {
$(".k").css("background-color", "#f40");
});

$(document).on(".l5").click(function () {
$(".i1").val(5);
});
$(document).on(".15d3").click(function(){
$(this).prev().val(+1);
});
$(document).on(".15d2").click(function(){
$(this).next().val(-1);
if($(this).next().val()==1){
aleft(已经达到最小数量);
$(this).next().val(1);
}

$(this).parent().parent().parent().next().val((this.table_rabate*s));

});
$(".l1").click(function() {
$(this).parent().each(function(){

});

});
$("#yrsc").click(function(){

});

loadshop();
// deletesp();

function loadshop() {

$.ajax({
    "url":"shopShowServlet",
    "type":"POST",
    "dataType":"json",
    "data":{"user_id":"3"},
    "success":function(_data){
        console.log(_data);
        html="";
        html1="";
        //html2+="";
        if(_data.code==200){
            html1+="<li  id='qbsp'class=‘borderHong’><a href='' ><em>全部商品</em><span>&nbsp;</span><span id='quansp'>"+_data.msg.length+"</span></a></li>";
            html+="<div id='shangpin'>";


            $(_data.msg).each(function(){
                html+="<div id='sp1'>";
                html+="<ul style='height:140px;'>";
                html+="<li id='l1'>";
                html+="<div class ='k'></div>";
                html+=" </li>";
                html+=" <li id='l2'>";
                html+="<div id='l2d1'>";
                html+="<div id='l2d2'>"+this.table_img+"</div>";
                html+="<div id='l2d3'";
                html+="<div id='l2d4'>"+this.table_name;"</div>";
                html+=" <div id='l2d5'>";
                html+="<div style='height:25px'></div>";
                html+="<div id='l2d6' style='height:44px;'>";
                html+=" <div class='kk'></div>";
                html+=" <div class='kk'></div>";
                html+=" <div class='kk'></div>";
                html+="</div>";
                html+=" <div></div>";
                html+=" </div>";
                html+=" </div>";
                html+=" </div>";
                html+="</li>";
                html+="<li id='l3'>";
                html+=" <div></div>";
                html+=" </li>";
                html+="<li id='l4'>";
                html+="<div class='l4d'>";
                html+="<div id='l4d2'>"+this.table_price;+"</div>";
                html+="<div id='l4d3' class='1111'>"+this.table_rabate;+"</div>";
                html+="</div>";
                html+=" </li>";
                html+="<li class='l5'>";
                html+="<div class='l4d'>";
                html+="<div id='l5d1'>";
                html+="<td class='tdthree'><span class='jiajie'><input type='button' value='-'><span class='num'>0</span><input type='button' value='+'></span></td>";
                html+="</div>";
                html+="</div>";
                html+="</li>";
                html+="<li id='l6'>";
                html+="<div class='l4d'>";
                html+=" <div style='margin-left:26px;margin-top:22px'>";
                html+="<em id='jine'>"+(this.table_rabate*s)+"</em>";
                html+="</div>";
                html+="</div>";
                html+="</li>";
                html+="<li id='l7'>";
                html+="<div class='l4d'>";
                html+="<div style='margin-left:26px;margin-top:22px'>";
                html+="<a id='yrsc'>移入收藏夹</a><br />";
                html+="<a id='sc'>删除</a>";
                html+="</div>";
                html+=" </div>";
                html+=" </li>";
                html+="</ul>";
                html+="</div>";
                alert($("#table_id").val());
        //SELECT * FROM tbl_collect where user_id=2  and table_id=7

            });

            html+="</div>";


        }else{
            html="购物车空空如也";
        }
        $("#shangpin").empty().append(html);
        $("#qbsp").empty().append(html1);

        var price=0;
        $(".1111").each(function(){
            price+=parseInt($(this).text());

        });


    }

});

};
function deletesp(){
//
$("#sc").click(function(){
//1.判断是否登录
//$.ajax({
//"url":"UserServlet",
//"dataType":"json",
//"type":"POST",
//"data":{"type":5},
//"success":function(_data){
//console.log(_data);
// if(_data.code==400){
// location.href="";
//}else{//已登录
//
var dletesp={"user_id":"3","table_id":$("#table_id").val()};
$.ajax({
"url":"deleteshopServlet",
"dataType":"json",
"type":"POST",
"data":deletesp,
"success":function(box_data){
console.log(box_data);
if(box_data.code==200){
alert("删除成功");
}else{
alert("删除失败");
}
}
});
//}
//}

    //});
    //$("#shop_id").val();
});

}
});

//这个是js的代码

图片说明

效果大概是这样

求问，怎么实现选中商品id计算金额
根据商品数量计算金额
怎么判断他选中id
前面的js无效，怎么让它后加载
怎么实现删除功能

用ajax实现

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 13:16
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要使用AJAX来实现上述购物车功能，您需要在服务器端处理请求，并将结果返回给客户端。这通常涉及创建一个Servlet或JSP页面，并通过适当的HTTP方法（例如GET或POST）向服务器发送请求。

    以下是一个基本示例，展示如何使用jQuery和AJAX从服务器获取数据并显示到HTML页面上：

    // 这个是前端JavaScript代码
$(document).ready(function() {
    // 获取用户选择的商品ID列表
    var selectedIds = [];

    // 每次点击时更新selectedIds数组
    $('.selectable').click(function(e) {
        e.preventDefault(); // 防止默认行为
        var itemId = $(this).attr('itemId');
        selectedIds.push(itemId);
    });

    // 当所有可选项都点击时执行操作
    $('.allSelectables').click(function() {
        // 提取所有选定的ID
        var allSelectedIds = selectedIds.join(',');

        // 发送Ajax请求到服务器
        $.ajax({
            url: 'yourServerUrl',
            method: 'POST',
            data: {ids: allSelectedIds},
            success: function(response) {
                // 显示响应的数据
                console.log(response);
            },
            error: function(xhr, status, error) {
                // 处理错误
                console.error(error);
            }
        });
    });

    // 在这里添加你的其他事件监听器
});

    然后，在服务器端，您可以创建一个Servlet或JSP页面，其中包含处理请求的功能。例如，如果您的Servlet名为shoppingCartServlet，则可以这样做：

    // 这个是服务器端Java Servlet代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    try {
        String idsString = request.getParameter("ids");
        List<String> selectedIds = Arrays.asList(idsString.split(","));

        // 处理这些ID以获取总价
        double totalAmount = calculateTotal(selectedIds);

        // 返回总价到客户端
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write(JSON.toJSONString(totalAmount));
    } catch (Exception e) {
        throw new ServletException(e);
    }
}

    在这个例子中，calculateTotal函数用于根据所选ID计算总金额。注意，您可能还需要为服务器端处理JSON输出和异常进行相应的配置。

    此外，为了使代码更易于维护，请确保正确处理各种输入情况，例如处理空值、不合法的输入等。同时，考虑使用一些安全措施，比如验证输入数据的格式和长度，以及防止SQL注入攻击等。

    评论

报告相同问题？