Django Crispy Form 将 JSON 呈现为 HTML答案

【问题标题】：Django Crispy Form renders JSON as HTMLDjango Crispy Form 将 JSON 呈现为 HTML
【发布时间】：2015-12-27 16:04:47
【问题描述】：

当我的清晰表单第二次提交时，它会显示 JSON，而不是重定向到成功页面或显示错误。第一次就像一个魅力。

Validator.js 不会在第二次提交时触发。因此，Ajax 不处理 JSON，这就是它显示为 HTML 的原因。

我尝试过event.preventDefault();，从提交按钮中删除type="submit"，从表单中删除action 和method，并从隐藏的输入中获取它。

GitHub repo

JSON 呈现为 HTML

{"success": false, "form_html": "\n\n<form  class=\"form-crispy\" ... }

HTML 表单

<form  class="form-crispy" id="form-grab" next="/transactions/" action="/transactions/add/" method="post" >
    <input type='hidden' name='csrfmiddlewaretoken' value='AfUGrMclChV1ctI6F5iw93EYyKpuB5Oh' />
    FIELDS
    ....
    <button  type="submit" class="btn button-submit" id="form-submit">Submit</button>
    <a href="/transactions/" class="button-cancel" role="button">Cancel</a>
</form>

<script src="/static/budget/js/validator.js"></script>

Validator.js

$("#form-submit").click(function(event) {
    event.preventDefault();
    alert('Fired');

    var form = $('#form-grab');

    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function (data) {
            if (!(data['success'])) {
                form.replaceWith(data['form_html']);
            }
            else {
                var next = form.attr('next');
                window.location.replace(next);
            }
        },
        error: function () {
            form.find('.error-message').show()
        }
    });
});

Views.py

@login_required(login_url='/login/', redirect_field_name='next')
@json_view
def add_transaction(request):
    user = get_user_in_session(request.session)
    data = {'user': user}

    if request.method == 'POST':
        form = TransactionAddForm(request.POST, initial=data)
        if form.is_valid():
            budget = form.cleaned_data['budget']
            description = form.cleaned_data['description']
            amount = form.cleaned_data['amount']
            transaction_date = form.cleaned_data['transaction_date']
            creation_date = now().date()
            transaction = Transaction(
                    budget=budget,
                    description=description,
                    amount=amount,
                    transaction_date=transaction_date,
                    creation_date=creation_date
            )
            transaction.save()
            return {
                'success': True,
            }
        context = {}
        context.update(csrf(request))
        form_html = render_crispy_form(form, context=context)
        return {
            'success': False,
            'form_html': form_html,
        }
    else:
        form = TransactionAddForm(initial=data)
        return render(request, 'base_form.html', {
            'title': 'Add Transaction',
            'form': form,
        })

【问题讨论】：

标签： python json ajax django django-forms

【解决方案1】：

啊哈，

我认为问题出在replaceWith jquery 方法中，该方法不仅删除了数据，还删除了链接到已删除的 html 节点的事件处理程序。

可能的解决方案是在replaceWith 之后重新附加事件。在上面的代码中：

...
form.replaceWith(data['form_html']);
# reattach
$("#form-submit").on('click', function(event){
  event.preventDefault();
  # continue with invoking ajax post function
});

【讨论】：