时间戳

首页 > 解决方案 > Django 视图不向 ReactJS/Axios 应用程序发送上下文数据

django - Django 视图不向 ReactJS/Axios 应用程序发送上下文数据

问题描述

看来我遇到了非常奇怪的行为。我正在构建一个 ReactJS+Django 3.0 应用程序。这里是问题...

我有一个<form onSubmit={handleSubmit}>将表单包装在前端的。

const handleSubmit = (e) => {
    e.preventDefault();
    axios.post(paths.login, qs.stringify({
                email: emailVal,
                password: passwordVal
            }));
}

这在将数据发送到 Django 视图时非常有效！但是当我尝试通过 Django 视图传递上下文变量时，它完全失败了。意义，

def login(request):
    data = {}
    '''
    Handle Logging in
    '''
    if request.method == 'POST':
        login_form = forms.LoginForm(request.POST)
        if login_form.is_valid():
            user = login_form.authenticate_user()
            #login(request, user)
            return redirect('home')
        else:
            data['errorMessage'] = ''
            for field, errors in login_form.errors.items():
                for error in errors:
                    data['errorMessage'] += error
    print(data)
    return render(request, 'index.html', context=data)

鉴于此，数据字典一开始是空的，但即使print(data)显示数据字典已填充，发送到index.html文件的上下文数据仍然是空的。

为什么会这样？我一直坚持这一点。

如果我只使用表单提交而不是这样的 axios，我可以解决这个问题：<form method='POST'>但是，我需要使用 axios。求救

标签： djangoreactjsaxios

解决方案

您也可以为此使用 Django 消息框架，这可能是一个更好的选择（假设您在 POST 之后重新呈现页面）：

from django.contrib import messages
def login(request):
    data = {}
    '''
    Handle Logging in
    '''
    if request.method == 'POST':
        login_form = forms.LoginForm(request.POST)
        if login_form.is_valid():
            user = login_form.authenticate_user()
            #login(request, user)
            return redirect('home')
        else:
            error_message = ''
            for field, errors in login_form.errors.items():
                for error in errors:
                    error_message += error
             messages.add_message(request, messages.ERROR, error_message)
    
    return render(request, 'index.html')

然后在您的模板中（这是一个使用 Bootstrap 的示例，但您可以修改它以满足您的需要）：

    {% if messages %}
        {% for message in messages %}
            {% if message.tags == 'error' %}
                <div class="alert alert-danger alert-with-icon alert-dismissible fade show" role="alert">
            {% else %}
                <div class="alert alert-{{ message.tags }} alert-with-icon alert-dismissible fade show" role="alert">
            {% endif %}
                {{ message|safe }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endfor %}
{% endif %}

如果您将数据作为 AJAX JSON 响应发回：

from django.http import JsonResponse
def login(request):
    data = {}
    '''
    Handle Logging in
    '''
    if request.method == 'POST':
        login_form = forms.LoginForm(request.POST)
        if login_form.is_valid():
            user = login_form.authenticate_user()
            #login(request, user)
            return redirect('home')
        else:
            error_message = ''
            for field, errors in login_form.errors.items():
                for error in errors:
                    error_message += error
            data['error_message'] = error_message
            return JsonResponse(data)
      else:
         return render(request, 'index.html')

在您的 Axios 代码中：

const handleSubmit = (e) => {
    e.preventDefault();
    axios.post(paths.login, qs.stringify({
                email: emailVal,
                password: passwordVal
            }).then((response) => {
             //do something with JSON response
           }, (error) => {
             //do something with JSON response
           });
     });

推荐阅读