[Fixed]-An Easy way to submit Django Forms using Ajax jQuery

The AJAX concept is not a lot different from how a general form submissions work. The idea behind AJAX is to have submit(pass) the data to the server asynchronously.

How it works?

With a general form submission the flow goes somthing like this.

User submits a POST request
               ↓
Server Does the Data Processing
               ↓
Redirects to a Success or Failure Page

With ajax it works pretty similar.

User Submits a form through AJAX
               ↓
AJAX sends the POST data to the server in the background and waits for a response
               ↓
Server does the Data Processing
               ↓
and sends a Response back to AJAX
               ↓
AJAX sends the response back to the same template where the request was initiated.

Now let’s have a look at a simple Ajax Login with a django view.

views.py

def ajax_login(request):
    """  
    This view logs a user in using the POST data.
    """

    if request.method == 'POST':
        data = {}
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(username=username, password=password)
        if (not user is None) and (user.is_active):
            login(request, user)
            # Set Session Expiry to 0 if user clicks "Remember Me"
            if not request.POST.get('rem', None):
                request.session.set_expiry(0)
            data['success'] = "You have been successfully Logged In"
        else:
            data['error'] = "There was an error logging you in. Please Try again"
        return HttpResponse(simplejson.dumps(data), mimetype="application/json")

In the above view , we did the data processing and sent a JSON response back. The ajax method will look something like this.

function ajaxLogin(){
    var dataString = '&username=' + $('input[name=username]').val() +
                     '&password=' + $('input[name=password]').val() +
    $.ajax({
        type: "POST",
        url: "/ajax_login/",
        data: dataString,
        success: function(data) {
            alert(data);
        }   
     }); 
     return false;   
}

Here, the success method recieves the data back and alerts it to the user.

UPDATE

I see that you have defined the ajaxPwchange() method but i do not really see you calling it anywhere and i think that is why the page still refreshes. You can bind the ajaxPwchange() method to submit button’s onclick event as follows.

<input class="btn btn-primary" type="submit" value="submit" onclick="ajaxPwchange();" />

or bind it under the document.ready method as follows:

$(document).ready(function(){
    $('input.btn-primary').click(function(){
        ajaxPwchange();
    });
});

UPDATE2

The div disappears because you are changing the div’s html to a json object directly in the following code.

success: function(response) { // on success..
             $('#modalchangepw').html(response); // update the DIV
         }

you should rather try something like this :

success: function(response) { // on success..
             var jsonData = $.parseJSON(response);
             $.each(response, function(){
                 $('#modalchangepw').append('<div class="message">' + $(this) + '</div>');
             });
         }