使用GAE </h1>上的ajax使用python输出更新<h1>标记

时间:2014-01-23 00:46:09

标签: javascript jquery python ajax google-app-engine

我已经习惯了一段时间,并且一直在网上寻找。我是javascript,jquery和AJAX的新手。如何正确调用此python脚本,以便从函数而不是原始代码获得返回输出?

我正在使用谷歌应用引擎来托管一个简单的名称生成器类型应用程序。因此,我在本地计算机上开发了这个(使用localhost上的应用程序)。我有一个按钮,它将返回我的'generate_name'函数的输出,并通过jinja2模板引擎将其注入页面的html。所以我每次按下按钮时都使用{{name}}替换为我的python函数的输出。

问题是,虽然这在我的机器上运行良好,但一旦它在应用程序引擎上运行,很明显每次按下按钮时整个页面都会重新加载以更新新生成的名称。它看起来不太好,每次都重新加载页面上的图像等。我决定尝试使用AJAX来更新包含名称的'<h1>'标记。

我把我的名字生成函数和它使用的单词列表放入它自己的.py文件中并编写了以下脚本:

$(document).ready(function () {
    $('button').click(function () {
        $.ajax({
            type:"GET",
            url:"static/words.py",
            success:function(msg){
                $('h1').html(msg);
            }
        });         
    }); 
});

当我现在按下按钮时,它只返回python脚本本身的实际代码,而不是我想要的返回值。这是python脚本:

#Two large word lists are here

def generate_band_name():
    noun = choice(nouns).strip()
    adj = choice(adjectives).strip()
    return '%s %s' % (adj, noun)

generate_band_name()  

,这是页面的html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="static/main.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="static/main.js"></script>
        <title>Band name generator</title>
    </head>    
    <body>    
        <div class="main">  
            <img src="static/Graffiti.png"/><br>
            <h1></h1><br>
            <button>GENERATE</button>
        </div>

    </body>
</html>

,这是我的app.yaml文件:

application: name-generator
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico


- url: .*/static
  static_dir: static

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.2"
- name: jinja2
  version: latest

目录结构如下:

C:/code/GAE/name-generator/
C:/code/GAE/name-generator/scripts
C:/code/GAE/name-generator/static
C:/code/GAE/name-generator/templates

修改

我已将此添加到我的main.app:

class Generate(MainHandler):

    def generate_band_name(self):
        noun = choice(nouns).strip()     # choice imported from random
        adj = choice(adjectives).strip() # nouns and adjectives are imported lists
        return '%s %s' % (adj, noun)

    def get(self):
        name = self.generate_band_name()
        # I am unsure how to get the ajax script to access
        # the output of generate_band_name

app = webapp2.WSGIApplication([
    ('/', MainHandler),
    ('/generate', Generate)
], debug=True)

2 个答案:

答案 0 :(得分:0)

好的以前的答案不对。再试一次。这完全是关于yaml:

- url: .*/static
  static_dir: static

导致这些内容按原样返回给用户,例如html,image,javascript等。


与其他地方的情况类似:

- url: .*
  script: main.app

你想把它放在yaml中用于ajax脚本

- url: /ajax/words.py
  script: /ajax/words.py

被修改。必须有一种方法来映射整个目录,但我不知道......

更新javascript以查看/ajax/words.py。从技术上讲,您可以使用主文件夹中的py来执行此操作,但这样更清晰。

答案 1 :(得分:0)

您应该将Ajax脚本的服务器端路径与任何其他处理程序完全相同。也就是说,由于您使用的是webapp2,它需要是一个实际的请求处理程序,接受请求并返回响应,并以与其他处理程序相同的方式映射为脚本URL。所以你不会访问/foo/bar.py - 你可以在app.yaml中映射/ foo / bar,或者(更可能)在main.py中的路由中映射/ foo / bar,并将其设置为执行该处理程序。

修改

我不明白你的例子,我害怕。但你似乎确实过于复杂。我就是这样做的。

<script type="text/javascript">
  $.click('#my_button').function() {
      $.get('/my_ajax_url', function(data) {
          $('#dynamic_content').append(data);
      });
  });

<div id="dynamic_content"></div>
<button id="my_button">click me</button>

main.py:

class MainHandler(RequestHandler):
    def get(self):
        ... load template ...
        self.response.write(my_template.render())

class AjaxHandler(RequestHandler):
    def get(self):
        return json.dumps(generate_band_names())

app = webapp2.WSGI.WSGIApplication([
    ('/', MainHandler),
    ('/my_ajax_url', AjaxHandler)
], debug=True)