在Google App Engine中使用jQuery提交Ajax表单

Question

我搞不清楚为什么这个不管用：

我需要向服务器发送请求，用一个叫 meanCal 的方法在 Python 中生成一些 HTML 片段，然后想把这个片段嵌入到提交的 HTML 文件里，使用一个计算方法，并且希望它能动态显示在 dyContent 这个 div 里。所有这些操作都是通过在表单里点击提交按钮一次完成的。

有什么建议吗？？谢谢！

提交的 HTML：

<div id="dyContent" style="height: 200px;">
            waiting for user...
            {{ mgs }}   
</div>


<div id="leturetext">
    <form id="mean" method="post" action="/calculation">
        <select name="meanselect">
            <option value=10>example</option>
            <option value=11>exercise</option>
        </select>
        <input type="button" name="btnMean" value="Check Results" />
    </form>
</div>

<script type="text/javascript"> 
$(document).ready(function() { 
  //$("#btnMean").live("click", function() {
  $("#mean").submit(function(){
     $.ajax({
       type: "POST",
       cache: false,
       url: "/meanCal",
       success: function(html) {
         $("#dyContent").html(html);
       }
     });
     return false;
  });
});
</script>

Python：

class MainHandler(webapp.RequestHandler):
  def get(self):
    path = self.request.path
    if doRender(self, path):
        return
    doRender(self,'index.htm')

class calculationHandler(webapp.RequestHandler):
  def post(self):
    doRender(self, 'Diagnostic_stats.htm',
{'mgs' : "refreshed.", })

  def get(self):
    doRender(self, 'Diagnostic_stats.htm')



class meanHandler(webapp.RequestHandler):

  def get(self):
    global GL
    index = self.request.get('meanselect'.value)
    if (index == 10):
        allData = GL.exampleData
        dataString = ','.join(map(str, allData))
        dataMean = (str)(stats.lmean(allData))
        doRender(self, 'Result.htm',
        {
        'dataIn' : dataString,
            'MEAN' : "Example Mean is: " + dataMean,
              })
        return
    else:
        allData = GL.exerciseData
        dataString = ','.join(map(str, allData))
        dataMean = (str)(stats.lmean(allData))
            doRender(self, 'Result.htm',
        {
        'dataIn' : dataString,
            'MEAN' : "Exercise Mean is: " + dataMean,
              })



def main():
  global GL
  GL = GlobalVariables()
  application = webapp.WSGIApplication(
        [('/calculation', calculationHandler),
    ('/meanCal', meanHandler),
        ('.*', MainHandler),
        ],
      debug=True)
  wsgiref.handlers.CGIHandler().run(application)

if __name__ == '__main__':
  main()

Answer 1

.submit() 方法实际上是提交表单，就像你点击了提交按钮一样。使用 jQuery，你可以根据特定条件来提交表单，或者在某个事件发生时提交。

如果你想把表单数据发送到服务器并获取响应，你需要创建一个数据字符串，然后把它作为参数放在 $.ajax() 调用中。

所以你的 JavaScript 代码看起来会是这样的：

var optionSelected = $('#mean select option:selected').val();
var dataString = 'meanselect=' + optionselected;
$.ajax({
   type: "POST",
   data: dataString,
   cache: false,
   url: "/meanCal",
   success: function(html) {
     $("#dyContent").html(html);
   }
 });

Answer 2

如果你想通过AJAX提交一个表单，最好使用一些现成的表单插件。这样你就不需要自己去构建要发送的参数了。

另外，确保你的表单在没有开启JavaScript的情况下也能正常工作是个好主意。这样即使浏览器的JavaScript被关闭，你的页面仍然可以使用。对于开启了JavaScript的访问者，可以通过AJAX提供更好的体验。

如果你需要调试，可以在Firefox中使用Firebug，或者在Safari和Google Chrome中使用内置的WebInspector。检查一下AJAX请求是否按照你的要求传递了数据，并查看响应内容，看看是否包含你想要的结果、错误信息或者其他内容。

---

Answer 3

要调试你在Google App Engine（GAE）应用中的Python代码，可以使用正在运行的应用的应用引擎启动器日志：

这样可以帮助你弄清楚应用出错的地方。我还建议你在代码中添加一些 logging.info（或者 logging.debug）的调用，这样可以记录更多信息。

比如：

import logging
class MainHandler(webapp.RequestHandler):
  def get(self):
    logging.info("Mainhandler has been called.")
    path = self.request.path
    logging.info("Mainhandler called for:" + path)
    if doRender(self, path):
        return
    doRender(self,'index.htm')