带有jquery的Django模板：现有页面上的Ajax更新

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:

我有一个带有表单的Google App Engine。当用户点击提交按钮时,将调用AJAX操作,服务器将输出一些内容附加到它所来自的页面的末尾。怎么样,我有一个Django模板,我打算使用jquery。我有以下观点:

<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:

这是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.

如您所见,当用户单击submit按钮时,将调用控制器方法Mainpage.post。

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

现在我想在表单后面显示'result'变量的内容,我该怎么办?

2 个解决方案

#1

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:

无法测试代码,您的结果是什么?你检查过AJAX调用返回的结果了吗?我建议您使用Firebug运行Firefox并将AJAX结果记录到Firebug控制台以查看您获得的内容:

//...
        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.

您还可以使用Firebug的Net面板来查看来回传递的内容。

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

另外,“simplejson.dumps(result)”会导致什么?

#2

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

请注意,您必须使用firebug或类似的东西进行调试,因为可能会出现序列化的问题,这将导致抛出错误但除非您使用类似firebug或实现的内容,否则将无法查看.ajax错误

#1