使用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'變量的內容，我該怎麼做？

來源

2008-10-16 Graviton

無法測試代碼，結果如何？你檢查過AJAX調用返回的結果嗎？我建議你用螢火蟲運行Firefox和日誌AJAX結果Firebug控制檯，看看你會得到什麼：

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

您也可以使用Firebug淨面板查看被來回傳遞。

此外，「simplejson.dumps（result）」的結果是什麼？

來源

2008-11-05 21:53:18 Seamus

這裏是我的成功函數的例子

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

請注意，你必須使用螢火蟲或類似的東西來調試，因爲可能有一些問題，序列化，這將引發和錯誤，但不會vieweable除非你使用類似螢火蟲或執行.ajax錯誤

來源

2009-05-07 02:26:37 Rasiel

使用jQuery的Django模板：現有頁面上的Ajax更新

回答

相關問題