cherrpy@Tutoria 8: Make it smoother with Ajax

近年来，Web应用程序已经摆脱了“HTML表单+刷新整个页面”的简单模式。 这种传统方案仍然运行良好，但用户已习惯于不刷新整个页面的Web应用程序。 从广义上讲，Web应用程序携带客户端执行的代码，可以与后端通信，而无需刷新整个页面。

这次教程将涉及更多代码。 首先，让我们看一下位于public/css/style.css中的CSS样式表。

body {
  background-color: blue;
}

#the-string {
  display: none;
}

我们正在添加一个关于将显示生成的字符串的元素的简单规则。 默认情况下，我们不会显示它。 将以下HTML代码保存到名为index.html的文件中。

我们将简单地使用jQuery框架，但可以随意用您喜欢的工具替换它。 该页面由简单的HTML元素组成，以获取用户输入并显示生成的字符串。 它还包含客户端代码，用于与实际执行艰苦工作的后端API进行通信。

最后，这是应用程序的代码，它为上面的HTML页面提供服务并响应生成字符串的请求。 两者都由同一个应用程序服务器托管。

import os, os.path
import random
import string

import cherrypy


class StringGenerator(object):
    @cherrypy.expose
    def index(self):
        return open('index.html')


@cherrypy.expose
class StringGeneratorWebService(object):

    @cherrypy.tools.accept(media='text/plain')
    def GET(self):
        return cherrypy.session['mystring']

    def POST(self, length=8):
        some_string = ''.join(random.sample(string.hexdigits, int(length)))
        cherrypy.session['mystring'] = some_string
        return some_string

    def PUT(self, another_string):
        cherrypy.session['mystring'] = another_string

    def DELETE(self):
        cherrypy.session.pop('mystring', None)


if __name__ == '__main__':
    conf = {
        '/': {
            'tools.sessions.on': True,
            'tools.staticdir.root': os.path.abspath(os.getcwd())
        },
        '/generator': {
            'request.dispatch': cherrypy.dispatch.MethodDispatcher(),
            'tools.response_headers.on': True,
            'tools.response_headers.headers': [('Content-Type', 'text/plain')]
        },
        '/static': {
            'tools.staticdir.on': True,
            'tools.staticdir.dir': './public'
        }
    }
    webapp = StringGenerator()
    webapp.generator = StringGeneratorWebService()
    cherrypy.quickstart(webapp, '/', conf)

将其保存到名为tut08.py的文件中，并按如下方式运行：

$ python tut08.py

转到http://127.0.0.1:8080/并使用输入和按钮来生成，替换或删除字符串。 请注意页面是如何刷新的，只是其内容的一部分。

还要注意您的前端如何使用直接但干净的Web服务API与后端进行交互。 非HTML客户端可以轻松使用相同的API。