使用javascript调用python函数并在网页上显示返回的字符串_Javascript_Python_Ajax_Google App Engine

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

javascript python ajax google-app-engine

使用javascript调用python函数并在网页上显示返回的字符串,javascript,python,ajax,google-app-engine,Javascript,Python,Ajax,Google App Engine,我有一个简单的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.Reques

我有一个简单的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>

这可以正常工作（事实上，可以尝试：-），但我希望能够生成一个新句子，而无需每次刷新页面

从中，看起来我可以使用Ajax来实现这一点。但我不知道如何把这一切放在一起。我想我可以用上一个链接中的顶部答案来替换

MakeStation（）

的内容，但我不确定如何将“响应”与我在网页上显示的内容结合起来。

你的思路是正确的。不需要调用location.reload（），您可以使用ajax获取输出并将其放在段落中。首先，在句子所在的段落中添加一个标识符：

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

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

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

嗯……我试过了，但点击按钮后没有反应。我是否需要更改make_句子中的某些内容（未在问题中显示）？虽然我是JS新手，但我对代码的理解是，ajax调用只获取访问URL时返回的内容（即make_语句的输出，因为这是自动调用的内容）。但也许make_语句不是问题所在，因为js调用本身（make句子（））似乎根本没有发生（我用“警报”检查了一下）…@nicole-摆脱额外的ajax参数，使用done（）函数而不是“success:”参数才是正确的选择。请参阅我的更新答案。也请访问以获得对ajax语法的正确理解。嗯……我尝试了这个方法，但单击按钮后没有得到响应。我是否需要更改make_句子中的某些内容（未在问题中显示）？虽然我是JS新手，但我对代码的理解是，ajax调用只获取访问URL时返回的内容（即make_语句的输出，因为这是自动调用的内容）。但也许make_语句不是问题所在，因为js调用本身（make句子（））似乎根本没有发生（我用“警报”检查了一下）…@nicole-摆脱额外的ajax参数，使用done（）函数而不是“success:”参数才是正确的选择。请参阅我的更新答案。另外，请访问以了解ajax语法的正确理解。

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