用javascript调用python函数并在网页上显示返回的字符串答案

【问题标题】：Call python function with javascript and display returned string on web page用javascript调用python函数并在网页上显示返回的字符串
【发布时间】：2014-01-02 15:33:50
【问题描述】：

我有一个简单的 appengine/python 应用程序，它允许用户单击一个按钮来显示一个随机生成的句子。至此，我将主要的python文件拼凑如下：

import jinja2
import os
import webapp2
import generator  # My random sentence generator module; its make_sentence() function returns a string

class MainPage(webapp2.RequestHandler):

      def get(self):
          template = jinja_environment.get_template('main.html')
          self.response.out.write(template.render(dict(sentence = generator.make_sentence())))

  jinja_environment = jinja2.Environment(
      loader=jinja2.FileSystemLoader(os.path.dirname(__file__))
  )

  application = webapp2.WSGIApplication([
      ('/', MainPage),
  ], debug=True)

在 main.html 中：

   <!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
       <link rel="stylesheet" href="css/custom.css">
       <title>Random Sentence Generator</title>
     </head>
     <body>
      <div class="jumbotron">
        <p class="lead">{{ sentence }}</p>
        <a class="btn-lg btn-info" onclick="makeSentence();return false;" href="#">Generate sentence!</a>
      </div>

      <script>    
        function makeSentence(){  
          location.reload(); 
        }
      </script>
      <script src="http://code.jquery.com/jquery.js"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    </body>
  <html>

如果这对问题很重要，这里还有 app.yaml：

   application: sentence-generator
   version: 1
   runtime: python27
   api_version: 1
   threadsafe: true

   handlers:
   - url: /css
     static_dir: css

  - url: /.*
    script: sengen.application

  libraries:
  - name: jinja2
    version: latest

这行得通（事实上，可以尝试一下here :-)），但我希望能够生成一个新句子而无需每次刷新页面。

来自this question，看来我可以为此使用 Ajax。但我不知道如何把它们放在一起。我想我可以将makeSentence() 的内容替换为上一个链接中的最佳答案，但我不确定如何将“响应”与我在网页上显示的内容结合起来。

【问题讨论】：

标签： javascript python ajax google-app-engine

【解决方案1】：

你在正确的轨道上。您可以使用 ajax 来获取输出并将其放在段落中，而不是调用 location.reload()。首先，在您放置句子的段落中添加一个标识符：

 <p id="sen1" class="lead">{{ sentence }}</p>

现在剩下的就是使用 AJAX 获取当前页面输出并将其显示在 sen1 中。你可以在 makeSentence 中做这样的事情。（这将提醒您在 ajax 中重新加载主页的响应。您可能希望从中提取所需的信息。）

    function makeSentence() {
     $.ajax({
          url:'http://sentence-generator.appspot.com'
       }
     )
     .done(function(data) {
         alert(data);
         })
    .fail(function(){
        alert('error');
        })
    .always(function(){
        //alert('always');
        })
        ;
    }

【讨论】：

嗯...我试过了，但点击按钮后没有反应。我是否需要更改 make_sentence 中的某些内容（未在问题中显示）？虽然我是 JS 新手，但我对您的代码的理解是，ajax 调用只是获取访问 URL 时返回的任何内容（即 make_sentence 的输出，因为这是自动调用的内容）。但也许 make_sentence 不是问题，因为似乎 js 调用本身 (makeSentence()) 根本没有发生（我检查了“警报”）..
@nicole - 摆脱额外的 ajax 参数并使用 done() 函数而不是“成功：”参数是要走的路。请参阅我的更新答案。
另请访问api.jquery.com/jQuery.ajax 以正确理解 ajax 语法。