Ajax Django-从模板内部使用表单调用视图

Ajax Django-从模板内部使用表单调用视图,ajax,django,django-forms,django-templates,django-views,Ajax,Django,Django Forms,Django Templates,Django Views,我想把几个帐户管理页面放在一个页面上。单击左侧的链接将通过ajax将相应的视图(发货/帐户信息、购物车等)加载到右侧的div中。例如:单击“查看购物车”将调用render_购物车视图,并将生成的模板插入同一页面上的另一个div中 在我开始介绍表单之前,这一切都很好。当表格填写正确时,它似乎工作正常。不完整的表单将只返回内部模板(渲染车,但不返回包含的帐户管理模板)。我可以将其更改为渲染外部视图,但随后会丢失表单错误和成功消息 代码如下 Javascript: function render_ac

我想把几个帐户管理页面放在一个页面上。单击左侧的链接将通过ajax将相应的视图(发货/帐户信息、购物车等)加载到右侧的div中。例如:单击“查看购物车”将调用render_购物车视图,并将生成的模板插入同一页面上的另一个div中

在我开始介绍表单之前,这一切都很好。当表格填写正确时,它似乎工作正常。不完整的表单将只返回内部模板(渲染车,但不返回包含的帐户管理模板)。我可以将其更改为渲染外部视图,但随后会丢失表单错误和成功消息

代码如下

Javascript:

function render_account_info() {
    var account_info = $.get({% url 'account-info' %}, function(response) {
        $('#account-edit').html(response);
    });
}
HTML:


我建议您使用Ajax调用发送表单,并将响应html动态插入主div

$('form').submit(function(e){
    e.preventDefault();
    var data = $('form').serialize();
    $.post('{% url 'account-info' %}', data).success(function(data){
        $('#account-edit').html(data)
    });
});
响应将包含带有错误消息或成功消息的更新表单

一般来说,我建议您针对不同的操作使用不同的视图

#this loads the main account management page
@login_required(login_url = reverse_lazy('login'))
def account(request):
    return render(request, 'website/account.html')


#this view is meant to change passwords and email addresses
#the commented out lines below are examples of what I have tried to get forms working right
@login_required(login_url = reverse_lazy('login'))
def render_account(request):
    c = {}
    c.update(csrf(request))
    passwordForm = PasswordChangeForm(user = request.user)
    if (request.method == 'POST'):
        passwordForm = PasswordChangeForm(user = request.user, data = request.POST)
        if (passwordForm.is_valid()):
            passwordForm.save()
            update_session_auth_hash(request, passwordForm.user)
        #return render(request, 'website/account_info.html', {'passwordForm': passwordForm})
        return render(request, 'website/account.html')
        #else:
            #return render(request, 'website/account.html')
    return render(request, 'website/account_info.html', {'passwordForm': passwordForm})
$('form').submit(function(e){
    e.preventDefault();
    var data = $('form').serialize();
    $.post('{% url 'account-info' %}', data).success(function(data){
        $('#account-edit').html(data)
    });
});