CODEWITHSUNDEEP
pythonajaxdjango
felix001
felix001

Reputation: 16741

Django and Ajax

Im trying to get a basic app working in Django that incorporates AJAX. The app will take a domain name and will then send it to the server, which will do a dns lookup on it and then send the response back via AJAX to the client.

Views

from django.http import *
from django.shortcuts import render_to_response
from django.template import RequestContext

import sys
import os
import socket

def main(request):
    if request.method == 'POST':
       dig_input = request.POST['digInput']
       digoutput = socket.gethostbyname(dig_input)
       return render_to_response('digajax.html', {'response': digoutput}, context_instance=RequestContext(request))
    else:
       return render_to_response('digajax.html', context_instance=RequestContext(request))

URLs

url(r'^digajax$', 'digajax.views.main'),

Templates

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<script type="text/javascript">
function send_request(){
  $.get(location.href, function(data){
    $("#output").html(data.output);
  });
}

 </head>
  <body>
        <form method="post" name="diginput form" action="/digajax">
          {% csrf_token %}
                                <input name="digInput" id="digInput" type="text">
                                <input type="button" onclick="send_request();" value="Request this page with AJAX">lookup</input>
                </form>
{% if response %}
  <div id="output">
    <p>{{ response|linebreaksbr }}</p>
  </div>
{% else %}
  <p>no</p>
{% endif %}

  </body}
</html>

Without AJAX everything is working. Now that I want to use AJAX Im not what what code I should add to each section.

Any help would be really appreciated...............

Upvotes: 1

Views: 1317

Answers (1)

Jack Shedd
Jack Shedd

Reputation: 3531

  1. Django provides an method on the request object your view is passed which will tell you whether the request was made via XmlHttp, request.is_ajax().
  2. If that method returns true, you probably want to return only the fragment of the page you want to update, instead of the whole page.
  3. If that method returns false, you probably want to return the entire page, since the user either has JavaScript turned off, or there was some type of error which caused the view to be requested normally.

So, your view should look like:

def main(request):
    if request.method == 'POST':
       dig_input = request.POST['digInput']
       digoutput = socket.gethostbyname(dig_input)
       if request.is_ajax():
            return HttpResponse("<p>%s</p>" % digoutput)
       else:
            return render(request, 'digajax.html', {
                'response': digoutput
            })
    else:
       return render(request, 'digajax.html')

Your JavaScript code should be look like:

<script type="text/javascript">
function send_request(){
  $.get(location.href, function(data){
    $("#output").html(data);
  });
}
</script>

Upvotes: 1

Related Questions