javascript - 如何将 AJAX 与 Google App Engine (Python) 结合使用-6ren

javascript - 如何将 AJAX 与 Google App Engine (Python) 结合使用

转载作者：可可西里更新时间：2023-11-01 02:16:21

28

4

我完全是 AJAX 的新手。我熟悉 HTML/CSS、jQuery 以及 GAE 和 Python 初学者。

为了理解 AJAX 的工作原理，我想知道在下面的示例中如何使用 AJAX(实际代码)。让我们使用一个类似于 reddit 的示例，其中投票赞成/反对被 ajaxified:

这是故事类型:

class Story(ndb.Model):
    title = ndb.StringProperty(required = True)
    vote_count = ndb.IntegerProperty(default = 0)

HTML 看起来像这样:

<h2>{{story.title}}</h2>
<div>
    {{story.vote_count}} | <a href="#">Vote Up Story</a>
</div>

AJAX 如何适应这里？

最佳答案

好的，先生，我们开始...一个简单的应用程序，只有一个故事和无限的投票...;-)

app.yaml

application: anotherappname
version: 1
runtime: python27
api_version: 1
threadsafe: true

default_expiration: "0d 0h 5m"

libraries:
- name: jinja2
  version: latest

- name: webapp2
  version: latest

handlers:
- url: .*
  script: main.app

main.py

import logging
from controllers import server
from config import config
import webapp2


app = webapp2.WSGIApplication([
        # Essential handlers
        ('/', server.RootPage),
        ('/vote/', server.VoteHandler)
    ],debug=True, config=config.config)


# Extra Hanlder like 404 500 etc
def handle_404(request, response, exception):
    logging.exception(exception)
    response.write('Oops! Naughty Mr. Jiggles (This is a 404)')
    response.set_status(404)

app.error_handlers[404] = handle_404

models/story.py

from google.appengine.ext import ndb


class Story(ndb.Model):
    title = ndb.StringProperty(required=True)
    vote_count = ndb.IntegerProperty(default = 0)

controllers/server.py

import os
import re
import logging
import config
import json

import webapp2
import jinja2

from google.appengine.ext import ndb
from models.story import Story


class RootPage(webapp2.RequestHandler):
    def get(self):
        story = Story.get_or_insert('Some id or so', title='A voting story again...')
        jinja_environment = self.jinja_environment
        template = jinja_environment.get_template("/index.html")
        self.response.out.write(template.render({'story': story}))


    @property
    def jinja_environment(self):
        jinja_environment = jinja2.Environment(
            loader=jinja2.FileSystemLoader(
                os.path.join(os.path.dirname(__file__),
                             '../views'
                ))
        )
        return jinja_environment


class VoteHandler(webapp2.RequestHandler):
    def post(self):
        logging.info(self.request.body)
        data = json.loads(self.request.body)
        story = ndb.Key(Story, data['storyKey']).get()
        story.vote_count += 1
        story.put()
        self.response.out.write(json.dumps(({'story': story.to_dict()})))

最后

views/index.html

<!DOCTYPE html>
<html>
    <head>
        <base href="/">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
        <h2>{{story.title}}</h2>
        <div>
            <span class="voteCount">{{story.vote_count}}</span>  | <a href="javascript:VoteUp('{{story.key.id()}}');" >Vote Up Story</a>
        </div>
        <script>
            function VoteUp(storyKey){
                $.ajax({
                  type: "POST",
                  url: "/vote/",
                  dataType: 'json',
                  data: JSON.stringify({ "storyKey": storyKey})
                })
                .done(function( data ) { // check why I use done
                    alert( "Vote Cast!!! Count is : " + data['story']['vote_count'] );
                    $('.voteCount').text(data['story']['vote_count']);
                });
            };
        </script>
    </body>
</html>

组装，阅读它很简单，然后运行。如果您需要一个可用的 git 示例，只需评论即可。

githublink (来自评论)

关于javascript - 如何将 AJAX 与 Google App Engine (Python) 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22052013/

28

4

0

文章推荐： javascript - 在 JavaScript/jQuery 中用多行声明一个字符串 var

文章推荐： java - 确定 Java 中 unicode 字符串的语言

文章推荐： javascript - 如何在 AngularJS 中存储用户 session ？

Excel - 结合 SUMPRODUCT
我有一张 Excel 表格，用于更新玩家评分。播放器配售初始化 1 2 3 4 金融评级一个 1 2.0 1.000 0.018 0.016 0.014 2.007 D 2 -2.0 54.5
qt - 结合 QAbstractItemModels
我有一个 map = std::map ，其中 myItemModel继承QAbstractItemModel . 我现在要合并所有 myItemModel合一myItemModel (其他所有元素模
r - do.call 结合 "::"
我大量使用“do.call”来生成函数调用。例如: myfun <- "rnorm"; myargs <- list(n=10, mean=5); do.call(myfun, myargs); 但是
Scala future 结合
想象一下 InputStream 的以下变体: trait FutureInputStream { //read bytes asynchronously. Empty array means E
结合 C 和汇编代码
这是我的 C 代码: #include void sum(); int newAlphabet; int main(void) { sum();
Jquery:结合 "each"函数选择类后的所有内容
我只是想选择类“.last”之后的每个元素。 HTML: 1 2 Jquery
C# ？？结合？ : question
我正在为一个项目构建一个 XML 反序列化器，我经常遇到这种类型的代码情况: var myVariable = ParseNDecimal(xml.Element("myElement")) == n
SQLite:结合 OR 和 AND
这是来自 Selecting the highest salary 的继续问题假设有一个表 'wagetable' name lowhours highhours wage pri
c - 结合 if 语句来设置值限制
我正在为我的程序创建一个战舰程序；该程序运行良好，但我试图确保当用户将坐标超出范围时，程序会说他们输入的坐标不正确。这是代码: #include #include void
结合 GetLastError 的值和自定义错误消息
我有一个函数，它为每种情况返回不同的 DWORD 值，如果出现错误。所以我有以下定义: #define ERR_NO_DB_CONNECTION 0x90000 #define ERR_DB_N
结合.net框架在C#派生类中触发基类事件及实现接口事件
在派生类中引发基类事件以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法。此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类。在创建可用作其他类的基类的类时，应
perl 结合 map 和每个
我只是想知道这是否可能: use Modern::Perl; my @list = ('a' .. 'j'); map { func($_) } each(@list); sub func { m
excel - 结合 IF 函数和 OR 函数以允许多个条件
我一直在使用 =IF(L2="","Active",IF(K2I2,"Late"))) 有效，但现在我需要检查 F 上的多个条件专栏我试过了 OR 函数 =IF(OR(F2="Scheduled"
FFmpeg - 结合 2 个命令
我有 2 个命令，如下所示。在视频中添加介绍图片 ffmpeg -y -loop 1 -framerate 10 -t 3 -i intro.png -i video.mp4 -filter_com
vba - 结合 VBA 和公式来检查独特的输出
好的，我有这个公式可以根据名字和姓氏列表生成用户名。现在，虽然这可行，但我希望单元格改为引用我自己的 VBA 函数。但是，由于代码少得多，我仍然想使用原始公式。我有这个公式: =SUBSTITUTE
haproxy - 结合 HAProxy 统计数据？
我有两个 HAProxy 实例。两个实例都启用了统计信息并且工作正常。我正在尝试将两个实例的统计信息合并为一个，以便我可以使用单个 HAProxy 来查看前端/后端统计信息。我试图让两个 hapro
typescript - switchMap 结合 mergeMap
我有一个 Observable，其中每个新值都应该引起一个 HTTP 请求。在客户端，我只关心最新的响应值；但是，我希望每个请求都能完成以进行监控/等。目的。我目前拥有的是这样的: function
javascript - 如何将延迟加载与 TinyMCE 结合？
我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户
r - 将重叠间隔与 lubridate 结合
我希望合并润滑间隔，以便如果它们重叠，则从内部第一个时间获取最小值和从内部最后一个时间获取最大值并总结以创建一个跨越整个时间段的新间隔。这是一个reprex: library(lubridate, w
html - 结合 flex 和绝对定位时的混淆
我有一个应用程序，它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小，我想在页脚上方的主内容面板上放置一些工具。主要布局是用 flex 完成的，我阅读文档的理解是绝对定位通过相对于最近

首页

博学

6Ren·AI

商城

javascript - 如何将 AJAX 与 Google App Engine (Python) 结合使用