ajax的两种模板

555K77

已于 2022-04-21 14:16:02 修改

阅读量401

点赞数 1

分类专栏： ajax 文章标签： ajax javascript jquery

于 2022-04-16 12:39:06 首次发布

本文链接：https://blog.csdn.net/SergioSilva/article/details/124211452

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用jQuery监听购物车中商品数量的增减事件，通过AJAX向服务器发送请求，动态更新商品数量并计算总价。同时，它实现了购物车列表的局部刷新，确保商品信息的正确显示。当用户点击增加或减少按钮时，会触发相应的视图函数进行数据修改，并返回更新后的购物车信息。

摘要由CSDN通过智能技术生成

<script>
	$(document).ready(function () {
	    $(".add-cart-btn").on("click", function () {
	        let element = document.getElementById('num_of_item')
	        let commodity_id = element.getAttribute("product_id")
	        let num_of_item = $("#num_of_item").val()
	        zlajax.post({
	            url: "/add_cart",
	            data: {
	                "commodity_id": commodity_id,
	                "num_of_item": num_of_item,
	            },
	            success: function (response) {
	                let server_code = response['returnvalue'];
	                let server_cart_query = response['cart_query'];
	                let server_sum_modify = response['sum_modify'];
	                let server_cart_count = response['cart_count'];
	                if (server_code === 0) {
	                    $(".cart-price").text(server_sum_modify)
	                    $(".cart-count").text(server_cart_count)
	
	                    $(".cartmini__list").empty()
	                    let div = $(".cartmini__list");
	                    let ul = $("<ul>");
	                    div.append(ul);
	                    for (let i = 0; i < server_cart_query["data"].length; i++) {
	                        let root = ul;
	                        let li = $("<li>");
	                        li.attr('class', 'cartmini__item p-relative d-flex align-items-start');
	                        root.append(li);
	                        let div1 = $("<div>");
	                        div1.attr('class', 'cartmini__thumb mr-15');
	                        li.append(div1);
	                        let img = $("<img>");
	                        img.attr('src', server_cart_query["data"][i]["commodity_image_oss"]);
	                        img.attr('alt', '');
	                        div1.append(img);
	                        let div2 = $("<div>");
	                        div2.attr('class', 'cartmini__content');
	                        li.append(div2);
	                        let h3 = $("<h3>");
	                        h3.attr('class', 'cartmini__title');
	                        h3.text(server_cart_query["data"][i]["commodity_name"]);
	                        div2.append(h3);
	                        let span1 = $("<span>");
	                        span1.attr('class', 'cartmini__price');
	                        div2.append(span1);
	                        let span2 = $("<span>");
	                        span2.attr('class', 'price');
	                        span2.text(server_cart_query["data"][i]["amount"] + " × $" + server_cart_query["data"][i]["commodity_price"]);
	                        span1.append(span2);
	                    }
	                    alert("success")
	                } else {
	                    alert("fail");
	                }
	            }
	        })
	    });
	})
	</script>

<script>
	$(document).ready(function () {
	    $(".cart-plus-minus").click(function () {
	        let chosen_num = $(this).find(".cart_num").val();
	        let chosen_id = $(this).find(".cart_id").html();
	        let chosen_amount = $(this).parent().parent().find(".subtotal-amount");
	        let chosen_amount_current = chosen_amount.html();
	        let sum_current = $(".total-sum").html();
	        $.post('/modify_cart', {
	            'chosenNum': chosen_num,
	            'chosenId': chosen_id,
	            'sum_current': sum_current,
	            'chosen_amount_current': chosen_amount_current
	        }).done(function (response) {
	            let server_response = response['text'];
	            let server_code = response['returnvalue'];
	            let server_subtt = response['subtt'];
	            let server_sum_modify = response['sum_modify'];
	            let server_cart_query = response['cart_query'];
	            if (server_code === 1) {
	                alert(server_response)
	            } else {
	                chosen_amount.text(server_subtt)
	                $(".total-sum").text(server_sum_modify)
	                $(".cart-price").text(server_sum_modify)
	
	                $(".cartmini__list").empty()
	                let div = $(".cartmini__list");
	                let ul = $("<ul>");
	                div.append(ul);
	
	                for (let i = 0; i < server_cart_query["data"].length; i++) {
	                    let root = ul;
	                    let li = $("<li>");
	                    li.attr('class', 'cartmini__item p-relative d-flex align-items-start');
	                    root.append(li);
	                    let div1 = $("<div>");
	                    div1.attr('class', 'cartmini__thumb mr-15');
	                    li.append(div1);
	                    let img = $("<img>");
	                    img.attr('src', server_cart_query["data"][i]["commodity_image_oss"]);
	                    img.attr('alt', '');
	                    div1.append(img);
	                    let div2 = $("<div>");
	                    div2.attr('class', 'cartmini__content');
	                    li.append(div2);
	                    let h3 = $("<h3>");
	                    h3.attr('class', 'cartmini__title');
	                    h3.text(server_cart_query["data"][i]["commodity_name"]);
	                    div2.append(h3);
	                    let span1 = $("<span>");
	                    span1.attr('class', 'cartmini__price');
	                    div2.append(span1);
	                    let span2 = $("<span>");
	                    span2.attr('class', 'price');
	                    span2.text(server_cart_query["data"][i]["amount"] + " × $" + server_cart_query["data"][i]["commodity_price"]);
	                    span1.append(span2);
	                }
	            }
	        }).fail(function () {
	            alert("fail");
	        });
	    })
	});
</script>

<script>
	$(document).ready(function () {
	    $(".cart-plus-minus").click(function () {
	    	// 1. jQuery
	        let chosen_num = $(this).find(".cart_num").val();
	        // 2. ajax传值给视图函数
	        $.post('/modify_cart', {
	            'chosenNum': chosen_num,
	        }).done(function (response) {
	            // 3、接受试图函数的json返回值
	            let server_code = response['returnvalue'];
	            let server_response = response['text'];
	            if (server_code === 1) {
	                alert(server_response);
	            } else {
	                // 4、一波局部刷新，改标签值操作
	                }
	            }
	        }).fail(function () {
	            alert("fail");
	        });
	    })
	});
</script>

视图函数中获取post过来的值

chosenNum = request.form['chosenNum']

@bp.route("/modify_cart", methods=['GET', 'POST'])
def modify_cart():
    chosenNum = request.form['chosenNum']
    cart = CartModel.query.filter_by(id=chosenId).first()
    if cart:
        if chosenNum == 0:
            db.session.delete(cart)
            db.session.commit()
        else:
            good = CommodityModel.query.filter_by(id=cart.commodity_id).first()
            price = good.price
            cart.amount = int(chosenNum)
            chosen_amount_modify = int(price) * int(chosenNum)
            minus = chosen_amount_modify - int(chosen_amount_current)
            sum_new = minus + int(sum_current)
            subtt = "$" + str(chosen_amount_modify)
            sum_modify = "$" + str(sum_new)
            cart.gmt_modify = datetime.datetime.now()
            db.session.commit()
            cart_dict = {}
            cart_query = []
            cart_dict["data"] = cart_query
            carts = db.session.query(CartModel.id, CartModel.user_id, \
                                     CartModel.amount, CommodityModel.id, CommodityModel.name, \
                                     CommodityModel.image_oss, CommodityModel.price). \
                filter(CartModel.status == 1).filter(CartModel.commodity_id == CommodityModel.id). \
                filter(CartModel.user_id == session.get("user_id")).all()
            for i in carts:
                cart_query.append({
                    "id": i[0],
                    "user_id": i[1],
                    "amount": i[2],
                    "commodity_id": i[3],
                    "commodity_name": i[4],
                    "commodity_image_oss": i[5],
                    "commodity_price": i[6]
                })
        return jsonify(
            {'text': 'You modify the good succeed', 'returnvalue': 0, 'subtt': subtt, 'sum_modify': sum_modify,
             'cart_query': cart_dict})
    else:
        return jsonify({'text': 'Something is error', 'returnvalue': 1})