django ajax提交

前端js

<script>
        $(function () {
            $("#addBtn").click(function () {
                $("#addModal").modal('show')
            })
            $("#submitBtn").click(function () {
                $.ajax({
                    url: "{% url 'transaction_add' pk=pk%}",
                    data: $("#addForm").serialize(),
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.success) {
                            $("#addModal").modal('hide')
                            location.reload()
                        } else {
                            $.each(res.detail, function (k, v) {
                                $("#id_" + k).next().text(v)
                            })
                        }
                    }
                })
            })
        })
    </script>

前端modal

<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" novalidate method="post" id="addForm">
                    {% csrf_token %}
                    {% for foo in form %}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">{{ foo.label }}</label>
                            <div class="col-sm-10" style="position: relative; margin-bottom: 10px">
                                {{ foo }}
                                <span class="error_msg" style="position: absolute;color: red"></span>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="submitBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

后端逻辑

def transaction_add(request, pk):
    res_code = ResCode()
    if request.method == 'POST':
        form = TransactionForm(data=request.POST)
        if not form.is_valid():
            res_code.detail = form.errors
            return JsonResponse(res_code.dict)
        amount = form.cleaned_data.get('amount')
        status = form.cleaned_data.get('status')
        trader = models.User.objects.filter(pk=pk).first()
        if trader.balance < amount:
            # 自定义显示错误，amount为字段名
            res_code.detail = {
                'amount': [f'余额不足，当前余额为{trader.balance}']
            }
            return JsonResponse(res_code.dict)
        form.instance.trader = trader
        form.instance.operator_id = request.user_info.uid
        if status == 1:
            trader.balance += amount
        elif status == 2:
            trader.balance -= amount
        trader.save()
        form.save()
        res_code.success = True
        res_code.detail = ''
        return JsonResponse(res_code.dict)