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

【问题标题】：Ajax Form submission in Google App Engine with jQuery使用 jQuery 在 Google App Engine 中提交 Ajax 表单
【发布时间】：2010-02-12 11:44:11
【问题描述】：

无法弄清楚为什么它不起作用：

我需要向服务器发送请求，使用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>

蟒蛇：

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()

【问题讨论】：

您能否准确解释一下什么不起作用？它不是通过您的请求处理程序吗？返回的结果不正确吗？
当我点击提交按钮时，ajax应该为我显示一张带有计算结果的图片，但由于某种原因，整个页面刷新，但图片没有显示。

标签： jquery python ajax google-app-engine

【解决方案1】：

要在您的 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')

【讨论】：

【解决方案2】：

要通过 AJAX 提交表单，您最好考虑使用Form Plugins。您将不需要自己构建要发送的参数。

此外，最好确保表单在未启用 javascript 的情况下也能正常工作。这样，即使关闭浏览器中的 js，您的页面仍然可以正常工作。对于启用 js 的访问者，使用 AJAX 添加额外的体验。

要进行调试，请在 Firefox 中使用 Firebug，或在 Safari 和 Google Chrome 中使用内置的 WebInspector。检查 AJAX 请求是否按照您的要求传递数据，并检查响应是否包含您想要的响应、错误消息或其他内容。

【讨论】：

【解决方案3】：

.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);
   }
 });

【讨论】：