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

user_1524542 0
Viewed 40617

I am newbie working with django. I need simple example. How to submit form (post) without refreshing page using Django, Ajax, jQuery?

This is my form, views and template:

views.py

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

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

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

        else:
            message = 'something wrong!'


        return render_to_response('contact/advert.html',
                {'message':message},
            context_instance=RequestContext(request))

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

forms.py (form using "ModelForm")

from django import forms
from django.forms import ModelForm
from linki.models import Advert


class AdvertForm(ModelForm):
    class Meta:
        model = Advert

TEMPLATES (form html code)

<html>
<head>

</head>
    <body>
    <h1>Leave a Suggestion Here</h1>
        {% if message %}
            {{ message }}
        {% endif %}
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
    </body>
</html>
django jquery ajax
4 Answers

Here is a perfect tutorial for it. I'll include the important parts:

first add this jQuery scripts to main.js and link it to your page.

Add this codes to the main.js (I'll include my version for sending blog comment)

// Submit post on submit
$('#comment-form').on('submit', function(event){
    event.preventDefault();
    create_post();
});

// AJAX for posting
function create_post() {
    $.ajax({
        url : "/blogcomment/", // the endpoint
        type : "POST", // http method
        data : {
            blog_id: blog_id,
            c_name : $('#comment-name').val(),
            c_email:  $('#comment-email').val(),
            c_text:  $('#comment-text').val(),
        }, // data sent with the post request

        // handle a successful response
        success : function(json) {
            $('#comment-name').val(''); // remove the value from the input
            $('#comment-email').val(''); // remove the value from the input
            $('#comment-text').val(''); // remove the value from the input
            $('#comment-form').prepend("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button>" + json.result +"</div>");
        },

        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('#comment-form').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>&times;</button>Oop! Error happend!</div>"); // add the error to the dom
            //console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
}

my views.py for getting comment looks like this:

def get_blog_comment(request):
    if request.method == 'POST':
        blog_id = request.POST.get('blog_id') 
        user = request.POST.get('c_name')
        email = request.POST.get('c_email')
        comment = request.POST.get('c_text')
        date = jdatetime.datetime.now().strftime("%Y-%m-%d");
        response_data = {}
        blogcomment = Comments(blog_id = blog_id, date = date, name = user, email = email, comment_text = comment)
        blogcomment.save()

        response_data['result'] = 'Success!!.'

        return HttpResponse(
            json.dumps(response_data),
            content_type="application/json"
        )
    else:
        return HttpResponse(
            json.dumps({"nothing to see": "this isn't happening"}),
            content_type="application/json"
        )

And finally the url part for urls.py which is not included in the original tutorial:

path('blogcomment/', views.get_blog_comment, name='get_blog_comment'),
user_22636830
Related