[Django]-How to POST a django form with AJAX & jQuery

You can access the data on the POST request using the name of the variable, in your case:

request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etc

The request.POST object is inmutable. You should assign the value to a variable, and then manipulate it.

I would advise you to use this JQuery plugin, so you can write normal HTML forms and then get them “upgraded” to AJAX. Having $.post everywhere in you code is kind of tedious.

Also, use the Network view on Firebug(for Firefox) or the Developer Tools for Google Chrome so you can view what’s being sent by you AJAX calls.

Something to look out for is when returning the form as an html snipped to a modal.

Views.py

@require_http_methods(["POST"])
def login(request):
form = BasicLogInForm(request.POST)
    if form.is_valid():
        print "ITS VALID GO SOMEWHERE"
        pass

    return render(request, 'assess-beta/login-beta.html', {'loginform':form})

Simple view to return the html snipped

Form html Snipped

<form class="login-form" action="/login_ajx" method="Post"> 
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="header">Authenticate</h4>
  </div>
  <div class="modal-body">
        {%if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{%endif%}
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_email">Email</label>
            <input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}">
            {%if form.email.errors %}<div class="alert alert-danger">{{ form.email.errors }}</div>{%endif%}
        </div>
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_password">Password</label>
            <input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}">
            {%if form.password.errors %}<div class="alert alert-danger">{{ form.password.errors }}</div>{%endif%}
        </div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Sign in" class="btn btn-primary pull-right"/>
</div>
</form>

Page containing the modal

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog">{% include "assess-beta/login-beta.html" %}</div>

Use the include tag to load the snipped on page load so it is available when you open the modal.

Modal.js

$(document).on('submit', '.login-form', function(){
$.ajax({ 
    type: $(this).attr('method'), 
    url: this.action, 
    data: $(this).serialize(),
    context: this,
    success: function(data, status) {
        $('#LoginModal').html(data);
    }
    });
    return false;
});

Using the .on() in this case work like .live() the key being binding the submit event not to the button but to the document.

As the other answers do work, I prefer to use the jQuery Form Plugin. It fully supports what you want and more. The post view is handled as usual in the Django part, just returning the HTML that is being replaced.

On the server side, your django code can process the AJAX post the same way it processes other form submissions. For example,

views.py

def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax():        
        print request.POST
        if note_form.is_valid():
            note_form.save()
            msg="AJAX submission saved"
        else:
            msg="AJAX post invalid"
    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)

I’ve assumed your NoteForm is a ModelForm — which it should be — so it has a save method. Note that in addition to adding the save() command, I changed your request.is_ajax to request.is_ajax(), which is what you want (if you use request.is_ajax your code will just check whether the request has a method called is_ajax, which obviously it does).

Most of examples of using AJAX POST with Django forms, including the official example:

https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example

are fine when ModelForm.clean() did not produce any errors (form_valid).
However, they do not perform hard part: translating ModelForm errors via AJAX response to Javascript / DOM client-side.

My pluggable application uses AJAX response routing with client-side viewmodels to automatically display class-based view AJAX post ModelForm validation errors similar to how they would be displayed in traditional HTTP POST:

https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing
https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html

Both Jinja2 and Django Template Engine are supported.