【问题标题】:Django-registration ajax post formDjango-registration ajax 发布表单
【发布时间】:2016-02-17 15:53:20
【问题描述】:

注册和验证我将通过 Ajax 提交表单。

我检查了其他帖子并尝试了一些选项,但csrf_token 给出了一个 jscript 错误

Uncaught SyntaxError: Unexpected identifier

表单是用来登录的,如果数据输入ok,即使报错,表单也提交ok。但如果输入的数据有误,则什么也不做。

$(document).on("submit", this.id, function(e) {
  e.preventDefault();
  var frm     = e.target.id;
  var frmData = $("#"+frm).serialize();
  $.ajax({
     type: "POST",
      url: '{% url 'django.contrib.auth.views.login' %}',
     contentType: 'application/x-www-form-urlencoded;charset=utf-8',
     csrfmiddlewaretoken : '{% csrf_token %}',
     data: frmData,
     success: function(data)
      {
      console.log('success');
        },
     error: function (data) {
      console.log('error');}
   }); 

我在表单中也有csrf_token 标签。

【问题讨论】:

    标签: ajax django django-registration


    【解决方案1】:

    我认为这会解决你的问题:

    // ajax components
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        };
        var csrftoken = getCookie('csrftoken');
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
    

    我的表格是什么样子的:

    <ul class="sub-menu collapse" id="settings">
        <form id="glucose_boundary_form" action="/glucose/goals" method="POST">
            {% csrf_token %}
            {{ glucose_boundary_form.as_p }}
        </form>
        <button type="submit" id="glucose_goals">Submit</button>
    </ul>
    

    按钮点击是什么样子的

    $('button#glucose_submit').click(function() {
            $.ajax({
                url:'glucose/submit',
                type: 'POST',
                data: $('form#glucose_form').serialize(),
                success: function(data) {
                    document.getElementById("glucose_form").reset();
                }
            });
        });
    

    编辑:

    这是我的登录和注册视图。虽然我不使用ajax进行注册。登录页面会自动进行表单验证。希望他们能帮助您了解我在做什么以及如何应用我的答案。

    from django import forms
    from django.http import HttpResponseRedirect
    from django.core.urlresolvers import reverse
    from django.shortcuts import render
    from django.contrib.auth.models import User
    from django.contrib.auth import login as auth_login
    from django.contrib.auth import logout as auth_logout
    from loginregistration.models import loginForm, registrationForm
    
    # Login user method
    def login(request):
        if request.user.is_authenticated():
            return HttpResponseRedirect('')
        form = loginForm(request.POST or None)
        if request.POST and form.is_valid():
            user = form.login(request)
            if user:
                auth_login(request, user)
                return HttpResponseRedirect('/')  # Redirect to a success page.
        return render(request, 'login.html', {'form': form})
    
    # Logout user method
    def logout(request):
        auth_logout(request)
        return HttpResponseRedirect(reverse('loginregistration.views.login'))  # Redirect to a success page.
    
    # Register user method
    def register(request):
        if request.user.is_authenticated():
            return HttpResponseRedirect('/')
    
        if request.method == 'POST':                    # If the form has been submitted...
            form = registrationForm(request.POST)       # A form bound to the POST data
            if form.is_valid():                         # All validation rules pass
                first_name  = form.cleaned_data['first_name']
                last_name   = form.cleaned_data['last_name']
                password    = form.cleaned_data['password']
                username    = form.cleaned_data['username']
                email       = form.cleaned_data['email']
    
                # Tries to create a new user and add them to the database
                try:
                    User.objects.create_user(username, email=email, password=password, first_name=first_name, last_name=last_name)
                except:
                    #Add error
                    return HttpResponseRedirect('#ERROR')
                return HttpResponseRedirect('/login')  # Redirect after POST
        else:
            form = registrationForm()  # An unbound form
    
        return render(request, 'register.html', {'form': form})
    

    这是我的登录模板:

     {% extends "base.html" %}
    {% block title %}Login{% endblock %}
    
    {% block content %}
    
        <form method="post" action="" id="login" class="container" 
            style="background-color: #FFFFFF; max-width: 450px; border-radius: 8px;">
            {% csrf_token %}
            <h1 style="text-align: center">Login to Your Account</h1>
            <div class="form-group container" style="max-width: 300px;">
                {{form.as_p}}
                <button type="submit" class="btn btn-primary">Login</button>
                <a href="/register" type="button" class="btn btn-default pull-right">Create an account</a>
            </div><br>
        </form>
        <script type="text/javascript">document.forms.login.id_username.focus();</script>
    
    {% endblock %}
    

    这是我的注册模板:

    {% extends "base.html" %}
    {% block title %}Create Account{% endblock %}
    
    {% block content %}
    
        <form method="post" action="" id="register" class="container " 
            style="background-color: #FFFFFF; max-width: 450px; border-radius: 8px;">
            {% csrf_token %} 
            <h1 style="text-align: center">Register for an Account</h1>
            <b></b>
            <p style="text-align: center">WARNING: This is a prototype website for testing purposes only. For security reasons, do not use your real credentials!</p>
            <div class="form-group container" style="max-width: 300px;">
                {{form.as_p}}
                <button type="submit" class="btn btn-primary btn-block">Create The Account</button>
            </div>
        </form>
        <script type="text/javascript">document.forms.register.id_firstName.focus();</script>
    
    {% endblock %}
    

    【讨论】:

    • 您好,我已经删除了 jscript 错误,但是,我想没有捕获错误的问题是因为 django-registration 应用程序。有什么办法可以得到错误?
    • 我不确定您遇到了什么错误。但是对于 CSRF 令牌问题,我的代码应该没有错误
    • 是的,csrf 现在可以了。但我没有收到与登录相关的错误。例如,错误的用户名/错误的通行证。 ajax 调用总是返回“成功”。有什么办法可以处理这些错误?
    • 是的,ajax调用会返回成功。您可以做的是在返回到 ajax 调用的结果中查找您的特定错误。例如,您通过 ajax 调用调用的视图将返回一个 dic 数据。您可以向该 dic 添加一个状态字符串,例如{ Status : "Error", ... }。然后在您的 ajax 成功正文中,您可以查找 if data["succes"] == "Error" ...
    • 用我自己的登录和注册的一些代码更新了我的答案。虽然我注册时不使用ajax。在没有 ajax 的情况下,我的字段将引发错误。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-11-04
    • 1970-01-01
    • 2016-07-06
    • 2018-04-26
    • 2011-11-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多