How to submit form without refreshing page using Django, Ajax, jQuery?

by

if you are planning to use an ajax submit with jquery you should not return html from your view.. I propose you to do this instead:

html:

<html>
<head>
</head>
<body>
    <h1>Leave a Suggestion Here</h1>
        <div class="message"></div>
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
</body>
</html>

the js

$('#form').submit(function(e){
    $.post('/url/', $(this).serialize(), function(data){ ... 
       $('.message').html(data.message);
       // of course you can do something more fancy with your respone
    });
    e.preventDefault();
});

the views.py

import json
from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        message="something wrong!"
        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        return HttpResponse(json.dumps({'message': message}))

    return render_to_response('contact/advert.html',
            {'form':AdvertForm()}, RequestContext(request))

so that way you put the response in the message div. instead of returning plain html you should return json.

More Related Contents:

  1. How do I POST with jQuery/Ajax in Django?
  2. 403 Forbidden error when making an ajax Post request in Django framework
  3. Django JQuery Ajax File Upload
  4. Reload table data in Django without refreshing the page
  5. Redirecting after AJAX post in Django
  6. Passing list of values to django view via jQuery ajax call
  7. JQuery: post FormData AND csrf token together
  8. My Own Like Button: Django + Ajax — How?
  9. Access-Control-Allow-Origin error sending a jQuery Post to Google API’s
  10. Pass array to ajax request in $.ajax() [duplicate]
  11. Pass request headers in a jQuery AJAX GET call
  12. TypeError: $.ajax(…) is not a function?
  13. jQuery loop over JSON result from AJAX Success?
  14. Jquery – How to make $.post() use contentType=application/json?
  15. Calling a ‘WebMethod’ with jQuery in ASP.NET WebForms
  16. jQuery posting valid json in request body
  17. Update div with jQuery ajax response html
  18. Django dependent select
  19. How do I know if jQuery has an Ajax request pending?
  20. How do I get the HTTP status code with jQuery?
  21. Synchronous XMLHttpRequest warning and
  22. File Upload via AJAX within JQuery
  23. How to get Interdependent dropdowns in django using Modelform and jquery?
  24. How do I filter the returned data from jQuery.ajax()?
  25. jQuery add CSRF token to all $.post() requests’ data
  26. Ajax call to download file returned from RESTful service
  27. jQuery – How to PUT JSON via Ajax?
  28. Invoke ColdFusion function using AJAX
  29. Mailchimp subscribe using jQuery AJAX?
  30. What happens when no response is received for a request? I’m seeing retries

Leave a Comment