jQuery Ajax与Google App Engine发布方法

Question

只是尝试通过appengine学习ajax，从post方法开始，但是它不起作用。 这是我的页面HTML代码

    <html>
    <head>
    <title> Hello </title>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var data={"name":"Hola"};
$(document).ready(function(){
$('#subbut').click(function(){
$.ajax({

 url: '/test',
 type: 'POST',
 data: data,
 success: function(data,status){

    alert("Data" + data +"status"+status);
  }
 });
 });
 });
 </script>
 </head>
 <body>
 <form method="post" action="/test">
 <input type="submit" id="subbut">
 </form>
 <div id="success"> </div>
 </body>
 </html>

这是我的python代码呈现上述html代码，其处理程序为/ test1

from main import *

class TestH1(Handler):
      def get(self):
              self.render('tester.html')

这是AJAX请求必须发送到的python脚本，处理程序是/ test。

    from main import * 
    import json
    class TestH(Handler):
        def post(self):
             t=self.request.get('name')
             output={'name':t+" duck"}
             output=json.dumps(output)
             self.response.out.write(output)

预期的行为是，当我单击“提交”按钮时，我收到一条警告消息“ Hola duck”，却什么也没得到。 任何帮助将不胜感激，因为我只是从GAE开始使用AJAX和Jquery

Answer 1

首先，我想您应该通过在.click函数中添加“ return false”来抑制按提交按钮时表单提交的默认行为。 但我想最好只使用

<input type="button" id="subbut">

相反（即使没有形式）。

然后，您应该在您的ajax调用中添加“ dataType：'json'”，以告诉jQuery您希望服务器提供哪种数据类型。 这样做，您将可以通过属性名称（例如“ data.name”）获取响应数据。 所以：

var data={"name":"Hola"};
$(document).ready(function(){
    $('#subbut').click(function(){
        $.ajax({
            url: '/test',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function(data,status){
                alert(data.name);
                alert("Data" + data +"status"+status);
            }
       });
       return false;
    });
});

如果为响应设置适当的内容类型标头会更好：

response.headers = {'Content-Type': 'application/json; charset=utf-8'}
self.response.out.write(output)

jQuery Ajax与Google App Engine发布方法

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-10-02 07:12:40

jQuery Ajax与Google App Engine发布方法

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-10-02 07:12:40

解决方案1
1 已采纳 2013-10-02 07:12:40