Django template with jquery: Ajax update on existing page

I have a Google App Engine that has a form. When the user clicks on the submit button, AJAX operation will be called, and the server will output something to append to the end of the very page where it comes from. How, I have a Django template, and I intend to use jquery. I have the following view:

<html>
<head>
<title></title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>

</head>
<body>
welcome
<form id="SubmitForm" action="/" method="POST"> 
<input type="file" name="vsprojFiles" />
<br/>
<input type="submit" id="SubmitButton"/>
</form>

<div id="Testing">
{{thebest}}
</div>

</body>
</html>

Here's the script in scripts.js:

$(function() {
    $("#SubmitForm").click(submitMe);
});

var submitMe = function(){
    //alert('no way');
    var f = $('#SubmitForm');
    var action = f.attr("action");
    var serializedForm = f.serialize();
  $.ajax( {
        type: 'post',
        data: serializedForm,
        url:  form_action,
        success: function( result ) {
          $('#SubmitForm').after( "<div><tt>" +
                                     result +
                                     "</tt></div>" );
        }
      } );

    };

And here's my controller code:

from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext import db
from google.appengine.ext.webapp import template
from google.appengine.api.urlfetch_errors import *
import cgi
import wsgiref.handlers
import os
import sys
import re
import urllib
from django.utils import simplejson

class MainPage(webapp.RequestHandler):
    def get(self):
        path = os.path.join(os.path.dirname(__file__), 'Index.html')
        template_values={'thebest': 'thebest'}
        tmplRender =template.render(path, template_values)
        self.response.out.write(tmplRender)
        pass

    def Post(self):
        print >>sys.__stderr__,'me posting'
        result = 'grsgres'
        self.response.out.write(simplejson.dumps(result))

As you can see, when the user clicks on the submitbutton, the controller method Mainpage.post will be called.

Now I want to display the content of the 'result' variable right after the form, how can I do it?

Without being able to test the code, what are your results? Have you checked the results returned by the AJAX call? I would suggest you run Firefox with Firebug and log the AJAX results to the Firebug console to see what you get:

//...
        success: function( result ) { 
        console.log( result );
      $('#SubmitForm').after( "<div><tt>" + 
// ...

You can also use the Net panel of Firebug to see what is being passed back and forth.

Also, what does "simplejson.dumps(result)" result in?

here is an example of my success function

success: function(json){
                $('#gallons_cont').html(json['gallons']);
                $('#area_cont').html(json['area']);
                $('#usage_cont').html(json['usage'])
                $('#results_json').show('slow');            
            },

please note that you do have to debug using firebug or something similar as there might be some issue serializing which will throw and error but will not be vieweable unless you use something like firebug or implement .ajax error

来源：https://stackoverflow.com/questions/209023/django-template-with-jquery-ajax-update-on-existing-page

标签

jquery

python

django

google-app-engine

django-templates