Django中如何将JavaScript实现的数量与价格数据保存至数据库

看起来你已经搞定了前端的交互逻辑，现在就差把用户最终确定的数量和价格传到后端存进数据库了。我帮你梳理下具体的修改步骤：

1. 前端HTML：添加隐藏字段传递动态数据 #

你的表单现在只提交了value_code，但数量和价格是JS动态计算的，得把这些数据加到表单里才能提交到后端。在<form>标签里补充以下内容：

<form method="POST" action="{% url 'zeronine:join_create' id=product.product_code %}">
    {% csrf_token %} <!-- Django必须的CSRF令牌，防止跨站请求伪造 -->
    <!-- 原有的select选项区域保持不变 -->
    
    <!-- 添加隐藏字段存储最终的数量和总价 -->
    <input type="hidden" name="quantity" id="hidden_quantity" value="0">
    <input type="hidden" name="total_price" id="hidden_total_price" value="0">
    
    <!-- 新增提交按钮，用户确认后触发提交 -->
    <button type="submit" class="btn btn-primary mt-3">确认提交</button>
</form>

2. 修改JavaScript：同步更新隐藏字段值 #

每当用户调整数量或者删除商品时，要同步更新上面的隐藏字段，确保提交时后端能拿到最新的有效数据。修改你的JS函数：

function pay_unit_func($par, unit_amount, quantity) {
    // 单个商品总价计算
    var unit_total_amount = (unit_amount * quantity).toLocaleString();
    $par.find('.price_amount').text(unit_total_amount);
    // 更新数量隐藏字段（单选项场景，多选项需调整）
    $("#hidden_quantity").val(quantity);
}

function pay_total_func() {
    // 总价计算
    var amount_total = 0;
    var converse_unit = 0;
    $('.cart_list li').each(function () {
        converse_unit = $(this).find('.price_amount').text().replace(/[^0-9]/g, "");
        amount_total = amount_total + (parseInt(converse_unit) || 0);
    });
    $('.cart_total_price').children().find('.item_price').text(amount_total.toLocaleString());
    // 更新总价隐藏字段
    $("#hidden_total_price").val(amount_total);
}

另外，在删除商品的逻辑里补充重置隐藏字段的判断：

$(this).parent().remove();
pay_total_func();
// 若所有商品都被删除，重置数量和价格为0
if ($('.cart_list li').length === 0) {
    $("#hidden_quantity").val(0);
    $("#hidden_total_price").val(0);
}

3. 重构Views.py：正确处理POST请求 #

你当前视图里有重复的if request.method == "POST"判断，逻辑混乱，整理后如下：

from django.shortcuts import get_object_or_404

def join_create(request, id):
    current_category = None
    designated = Designated.objects.all()
    designated_object = Designated.objects.filter(rep_price='True')
    value_object = Value.objects.all()
    categories = Category.objects.all()
    products = Product.objects.all()
    
    if not request.user.is_authenticated:
        return HttpResponseRedirect(reverse('zeronine:login'))
    
    product = get_object_or_404(Product, product_code=id)
    
    if request.method == "POST":
        element_form = ElementForm(request.POST)
        # 从POST中获取动态计算的数量和价格
        quantity = request.POST.get('quantity', 0)
        total_price = request.POST.get('total_price', 0)
        
        # 验证数据合法性：选项有效、数量和价格大于0
        if element_form.is_valid() and int(quantity) > 0 and int(total_price) > 0:
            # 创建参与记录
            join = Join.objects.create(
                product_code=product,
                username=request.user
            )
            
            # 创建商品选项配置记录
            element = Element.objects.create(
                designated_code=get_object_or_404(Designated, product_code=id),
                value_code=element_form.cleaned_data['value_code']
            )
            
            # 创建参与详情记录
            JoinDetail.objects.create(
                join_code=join,
                designated_code=get_object_or_404(Designated, product_code=id),
                quantity=int(quantity),
                price=int(total_price)
            )
            
            # 提交成功后跳转列表页
            return HttpResponseRedirect(reverse('zeronine:list'))
        else:
            # 验证失败，返回详情页并提示错误
            return render(request, 'zeronine/detail.html', {
                'product': product,
                'designated': designated,
                'element_form': element_form,
                'value_object': value_object,
                'error_msg': '请选择有效选项并设置大于0的数量'
            })
    else:
        # GET请求，返回详情页空表单
        element_form = ElementForm()
        return render(request, 'zeronine/detail.html', {
            'product': product,
            'designated': designated,
            'element_form': element_form,
            'value_object': value_object
        })

4. 关键注意事项 #

• 数据安全：后端必须验证数量和价格的合法性（比如大于0），不能完全信任前端传递的数据，避免恶意提交。
• 多选项场景：如果支持用户选择多个选项（JS中append多个商品块），需要改用表单集（FormSet）或者循环处理每个选项的数量和价格，创建多条JoinDetail记录。
• 外键关联：确保JoinDetail的join_code和designated_code关联正确，避免出现外键约束错误。

这样修改后，用户选择选项、调整数量后点击提交，后端就能正确接收并保存数据到数据库了。

内容的提问来源于stack exchange，提问作者Rhdehd