在 Google App Engine 上使用 jQuery 处理 json 表单

Question

我在让 jQuery 在 GAE python 2.7 上工作时遇到了一些问题。 主要问题是jQuery无法捕捉到服务器返回的json数据。

一个没有什么特别的简单评论表单：

<form action="/postcomment/" method="post" id="commentform">
  <input type="text" name="author" id="author"  onfocus="if(this.value=='Name: (required)') this.value='';" onblur="if(this.value=='') this.value='Name: (required)';" {% if name %}value="{{ name }}"{% else %}value="Name: (required)"{% endif %} size="22" tabindex="1" aria-required='true' />
  <input type="text" name="email" id="email"  onfocus="if(this.value=='E-Mail: (required)') this.value='';" onblur="if(this.value=='') this.value='E-Mail: (required)';" {% if email %}value="{{ email }}"{% else %}value="E-Mail: (required)"{% endif %} size="22" tabindex="2" aria-required='true' />
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="3"></textarea>
<input name="submit" type="submit" id="submit" tabindex="4" value="Submit" />
</form>

我的 jQuery 代码（只是为了使其更简单的结构）：

$("#submit").click(function() {
$.ajax({
 dataType: 'json',
 beforeSubmit: function() {
 },
 timeout: 60000,
 error: function(request,error) {
 },
  success: function(data) {
   var obj = jQuery.parseJSON(data);
   //blah blah...
   } // End success
}); // End ajax method
});

在服务器端：

class PostComment(BaseHandler):
  def post(self):
    self.response.headers['Content-Type'] = "application/json"
    response = {'errorcode': 0}
    self.response.out.write(json.dumps(response))

结果是： 点击“提交”按钮后，我的 Firefox 3.6 浏览器提示：有“application/json”文件，你想用什么工具打开它？

我希望 jQuery 能够捕获这个“json”数据并对其进行处理。但它没有发生。

我相信我快到了，但出了点问题。

Answer 1

您需要取消表单的默认操作，即提交（取消任何正在运行的 JavaScript AJAX 查询）：

$("#submit").click(function() {
    $.ajax({
     dataType: 'json',
     beforeSubmit: function() {
     },
     timeout: 60000,
     error: function(request,error) {
     },
      success: function(data) {
       var obj = jQuery.parseJSON(data);
       //blah blah...
       } // End success
    }); // End ajax method
    return false; // Cancel default action.
});

通过从点击处理程序返回false，normal 表单操作，即浏览器将数据提交到action 属性中指定的 URL 的操作不会被执行。