带有jQuery的Django模板:现有页面上的Ajax更新

前端之家收集整理的这篇文章主要介绍了带有jQuery的Django模板:现有页面上的Ajax更新 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个带有表单的Google App Engine.当用户单击“提交”按钮时,将调用AJAX操作,并且服务器将输出一些内容以附加到其所在页面的末尾.我有一个Django模板,打算使用jquery.我有以下观点:

  1. @H_403_6@<html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="scripts/jquery.js"></script>
  5. <script type="text/javascript" src="scripts/scripts.js"></script>
  6.  
  7. </head>
  8. <body>
  9. welcome
  10. <form id="SubmitForm" action="/" method="POST">
  11. <input type="file" name="vsprojFiles" />
  12. <br/>
  13. <input type="submit" id="SubmitButton"/>
  14. </form>
  15.  
  16. <div id="Testing">
  17. {{thebest}}
  18. </div>
  19.  
  20. </body>
  21. </html>

这是scripts.js中的脚本:

  1. @H_403_6@$(function() {
  2. $("#SubmitForm").click(submitMe);
  3. });
  4.  
  5. var submitMe = function(){
  6. //alert('no way');
  7. var f = $('#SubmitForm');
  8. var action = f.attr("action");
  9. var serializedForm = f.serialize();
  10. $.ajax( {
  11. type: 'post',data: serializedForm,url: form_action,success: function( result ) {
  12. $('#SubmitForm').after( "<div><tt>" +
  13. result +
  14. "</tt></div>" );
  15. }
  16. } );
  17.  
  18. };

这是我的控制器代码

  1. @H_403_6@from google.appengine.api import users
  2. from google.appengine.ext import webapp
  3. from google.appengine.ext import db
  4. from google.appengine.ext.webapp import template
  5. from google.appengine.api.urlfetch_errors import *
  6. import cgi
  7. import wsgiref.handlers
  8. import os
  9. import sys
  10. import re
  11. import urllib
  12. from django.utils import simplejson
  13.  
  14. class MainPage(webapp.RequestHandler):
  15. def get(self):
  16. path = os.path.join(os.path.dirname(__file__),'Index.html')
  17. template_values={'thebest': 'thebest'}
  18. tmplRender =template.render(path,template_values)
  19. self.response.out.write(tmplRender)
  20. pass
  21.  
  22. def Post(self):
  23. print >>sys.__stderr__,'me posting'
  24. result = 'grsgres'
  25. self.response.out.write(simplejson.dumps(result))

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

现在,我想在表格后立即显示“结果”变量的内容,该怎么办?

最佳答案
如果无法测试代码,结果是什么?您是否检查了AJAX调用返回的结果?我建议您使用Firebug运行Firefox,并将AJAX结果记录到Firebug控制台中,以查看得到的结果:

  1. @H_403_6@//...
  2. success: function( result ) {
  3. console.log( result );
  4. $('#SubmitForm').after( "<div><tt>" +
  5. // ...

您还可以使用Firebug的“网络”面板查看来回传递的内容.

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

猜你在找的jQuery相关文章