在Django（1.10）中使用Ajax

Question

I couldn't send a form through django (1.10) without refreshing the page. I have searched every other related question on Stackoverflow but no success.

This is my ajax request:

$(document).on('submit', 'signup-form', function(e){
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: '{% url "accounts:signup" %}',
        data: {
          firstname:$('#firstname').val(),
          lastname:$('#lastname').val(),
          email:$('#email').val(),
          password1:$('#password1').val(),
          password2:$('#password2').val(),
          username:$('#username').val(),
          csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(){
          alert('done');
        }
      })
    });

This is my form:

  <form id="signup-form" class="casemedic-color">
    {% csrf_token %}
    <label><b>E-mail and Username:</b></label>
    <br>
    <input class="input-red input-shadow" id="email" type="email" name="email" style="max-width:150px;" placeholder="e-mail">&nbsp;<input class="input-red input-shadow" type="username" id="username" name="username" style="max-width:150px;" placeholder="username">
    <br>
    <label><b>First name and Last name:</b></label>
    <br>
    <input class="input-red input-shadow" id="firstname" type="text" name="firstname" style="max-width:150px;" placeholder="first name">&nbsp;<input class="input-red input-shadow" type="text" id="lastname" name="lastname" style="max-width:150px;" placeholder="last name">
    <br>
    <label><b>Password:</b></label>
    <br>
    <input class="input-red input-shadow" id="password1" type="password" name="password1" placeholder="password">
    <br>
    <label><b>Confirm Password:</b></label>
    <br>
    <input class="input-red input-shadow" id="password2" type="password" name="password2" placeholder="confirm">
    <br>
    <br>
    <button class="btn casemedic-button" type="submit"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;Sign up</button>

    <br>
    <br>
  </form>

This is my view function. (In this case, it should still refresh the page, but it cannot even receive the request to refresh.) This function is inside an app called accounts. (accounts:signup)

def signup(request):
    if request.method == 'POST':
        if request.POST['username'] and request.POST['password1'] and request.POST['password2'] and request.POST['firstname'] and request.POST['lastname'] and request.POST['email']:
            if request.POST['password1'] == request.POST['password2']:
                try:
                    user = User.objects.get(username=request.POST['username'])
                    return render(request, 'firstpage.html', {'error':'Username has alredy been taken'})
                except User.DoesNotExist:
                    user = User.objects.create_user(username=request.POST['username'].lower(), password=request.POST['password1'], first_name=request.POST['firstname'], last_name=request.POST['lastname'], email=request.POST['email'] )

                    user_ex = UserEx(user=user)
                    user_notifications = UserNotification(user=user)
                    user_likes = UserLike(user=user)
                    user_saves = UserSave(user=user)

                    user_ex.save()
                    user_notifications.save()
                    user_saves.save()
                    user_likes.save()

                    login(request, user)

                    return redirect('handler:home')
            else:
                return render(request, 'firstpage.html', {'error':'Passwords didn\'t match'})
        else:
            return render(request, 'firstpage.html', {'error':'Please, fill in the form properly.'})
    else:
        return render(request, 'firstpage.html')

This is the url:

url(r'^signup/', views.signup, name='signup'),

Answer 1

Of course it's possible.

However none of your inputs have id attributes, so all your jQuery selectors will fail. Either give the inputs IDs, or use another type of selector (eg [name="whatever"]).