使用jQuery的Django模板:现有页面上的Ajax更新
问题描述:
我有一个Google App Engine,它有一个表单。当用户点击提交按钮时,AJAX操作将被调用,并且服务器将输出一些内容以附加到它所来自的页面的末尾。如何,我有一个Django模板,我打算使用jQuery。我有以下看法:使用jQuery的Django模板:现有页面上的Ajax更新
<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>
下面是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>");
}
});
};
这是我的控制器代码:
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))
正如你所看到的,在用户点击时在提交按钮上,控制器方法Mainpage.post将被调用。
现在我想在表单后面显示'result'变量的内容,我该怎么做?
答
无法测试代码,结果如何?你检查过AJAX调用返回的结果吗?我建议你用萤火虫运行Firefox和日志AJAX结果Firebug控制台,看看你会得到什么:
//...
success: function(result) {
console.log(result);
$('#SubmitForm').after("<div><tt>" +
// ...
您也可以使用Firebug净面板查看被来回传递。
此外,“simplejson.dumps(result)”的结果是什么?
答
这里是我的成功函数的例子
success: function(json){
$('#gallons_cont').html(json['gallons']);
$('#area_cont').html(json['area']);
$('#usage_cont').html(json['usage'])
$('#results_json').show('slow');
},
请注意,你必须使用萤火虫或类似的东西来调试,因为可能有一些问题,序列化,这将引发和错误,但不会vieweable除非你使用类似萤火虫或执行.ajax错误