Javascript Xhrpost To Django ...

This article will show you how to best plug those pieces together and get up and running with ajax and dojango,let is create a template that extends dojango/base.html (it is available since the settings.py includes the app “dojango”.

let’s build the simple.html file in the templates folder of our django app (I called my app “core”).

 {% extends "dojango/base.html" %}
 
{% block dojango_page_title %}Simple AJAX with dojango{% endblock %}
 
{% block dojango_header_extra %}
 <script type="text/javascript">
  function userFormSubmit(){
   var form = dojo.byId("userForm");
   dojo.xhrPost({url:form.action,
    handleAs: "json",
    content:{surname:form.surname.value,
     firstname:form.firstname.value
    },
    load:function(response, ioArgs){
     dojo.byId("info").innerHTML = "Submitted";
    }
   });
  }
 </script>
{% endblock %}
 
{% block dojango_content %}
 <form id="userForm" onsubmit="userFormSubmit(); return false;" action="/simple-ajax-set/">
  First name: <input id="firstname" /><br />
  Surname: <input id="surname" /><br />
  <input type="submit" value="Submit" /> <span id="info"></span>
 </form>
{% endblock %}

Now we have to wire up the template to render when we access http://localhost:8000/simple/ and the AJAX method, that we submit the data to, like so in the urls.py:

 from django.conf.urls.defaults import *
 
urlpatterns = patterns(,
    (r^dojango/, include( wouldojango.urls)),
 
    (r^simple/, core.views.simple),
    (r^simple-ajax-set/, core.views.simple_ajax_set),
)

Now we  needs to implement these two functions, like this example:

 from django.shortcuts import render_to_response
from dojango.decorators import json_response
 
def simple(request):
    return render_to_response( isimple.html)
 
@json_response
def simple_ajax_set(request):
    firstname = request.POST[firstname]
    surname = request.POST[ isurname]
    print firstname, surname
    return { isuccess:True}

Now we will submit the form and see that the data got submitted.

function userFormSubmit(){
 var form = dojo.byId("userForm");
 dojo.xhrPost({url:form.action,
  handleAs:"json",
  content:{surname:form.surname.value,
   firstname:form.firstname.value
  },
  load:function(response, ioArgs){
   if (response.success){
    dojo.byId("info").innerHTML = "Submitted successfully";
   } else {
    dojo.byId("info").innerHTML = "Error: "+response.error;
   }
  },
  error:function(data){ // This happens on a 500 error or alikes.
   dojo.byId("info").innerHTML = "Error sending data.";
  }
 });
}

 Original Source:
http://uxebu.com/blog/2008/07/26/ajax-with-dojango/