首页 > 其他分享> > 带有jQuery的Django模板：现有页面上的Ajax更新

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

2019-12-10 20:59:17 作者：互联网

我有一个带有表单的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>

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

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

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

解决方法:

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

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

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

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

标签：google-app-engine,django-templates,python,django,jquery
来源： https://codeday.me/bug/20191210/2104082.html