使用jQuery在googleappengine中提交Ajax表单

Question

无法找出它为什么不起作用：

我需要将请求发送到服务器，用python中的meanCal方法生成一些html片段，然后使用计算方法将该片段嵌入到提交的html文件中，并在dyContent div中动态显示。所有过程都是通过单击表单中的submit按钮来完成的。在

有什么建议吗？？？提前谢谢。在

提交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:

^{pr2}$

Answer 1

要在GAE应用程序中调试python代码，请在正在运行的应用程序上使用应用程序引擎启动器日志：

这将有助于澄清应用程序的失败之处。我也建议给日志记录.info（或日志记录.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')

Answer 2

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

另外，如果您确保表单在没有启用javascript的情况下正常工作会更好。这样，即使关闭了浏览器中的js，页面仍然可以正常工作。对于启用js的访问者，添加使用AJAX的额外体验。在

要调试，请在Firefox中使用Firebug，或者使用Safari和googlechrome中内置的WebInspector。检查AJAX请求是否按您的要求传递数据，并检查响应，它是否包含所需的响应、错误消息或其他信息。在

---

Answer 3

.submit()方法实际上提交表单，就像您按下submit按钮一样。使用jQuery，您可以仅根据特定条件提交表单，或者作为对事件的响应。在

如果要将表单数据发送到服务器并获得响应，则需要创建一个数据sting，然后在$.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);
   }
 });