【python之路43】tornado的用法（一）

時間 2019-12-14

原文原文鏈接

1、tonado的代碼css

一、返回字符串html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")
    def post(self):
        self.write("Hello, world")

#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

tornado的基本代碼

二、render返回html文件 python

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html')  #直接返回本錄下的s1.html
    def post(self):
        self.write("Hello, world")

#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

render直接返回html文件

三、html模板配置jquery

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html')  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self):
        self.write("Hello, world")

#配置全局文件路徑爲:template
settings = {
    'template_path':'template',
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

html全局路徑模板配置

四、html中的靜態路徑配置web

對html中引用的css和js文件的靜態路徑，須要在settings中配置，不然是沒法找到文件的npm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/common.css" />
</head>
<body>
    <h1>hello world!</h1>
    <script src="static/oldboy.js"></script>
</body>
</html>

s1.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html')  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self):
        self.write("Hello, world")


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

五、靜態路徑的前綴json

實際存放路徑見上面4的圖片，只要定義了前綴，無論靜態文件路徑是什麼，html中都須要用定義的前綴瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sss/common.css" />
</head>
<body>
    <h1>hello world!</h1>
    <script src="sss/oldboy.js"></script>
</body>
</html>

s1.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html')  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self):
        self.write("Hello, world")


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

六、post方法中self.get_argument接收對應的參數的值緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sss/common.css" />
</head>
<body>
    <form method="post" action="/index">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>
    <script src="sss/oldboy.js"></script>
</body>
</html>

s1.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html')  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self,*args,**kwargs):
        re = self.get_argument('user') #獲取html傳過來的user對應的參數值
        print(re)
        #self.write("Hello, world")
        self.render('s1.html')  #返回html


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

七、模板語言服務器

兩個知識點：

1）循環，item表示變量，用兩個大括號表示

<ul>
    {% for item in xx %}
    <li>{{item}}</li>
    {% end %}
</ul>

2）render能夠加第2個參數，xx必須與html中模板語言中的xx一致，INPUT_LIST表示py中的列表

self.render('s1.html',xx = INPUT_LIST)

self.render('s1.html',xx = INPUT_LIST,yy = aa) #yy表示html中的變量yy,aa表示py中的變量

re = self.get_argument('user',None)  #表示若是參數user不存在則re==None

下面例子，在頁面文本框中增長內容當即顯示在頁面上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sss/common.css" />
</head>
<body>
    <form method="post" action="/index">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>

    <ul>
        {% for item in xx %}
        <li>{{item}}</li>
        {% end %}
    </ul>
    <script src="sss/oldboy.js"></script>
</body>
</html>

s1.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web

INPUT_LIST = []
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST)  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self,*args,**kwargs):
        re = self.get_argument('user',None) #獲取html傳過來的user對應的參數值
        if re:
            INPUT_LIST.append(re)
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST)  #返回html


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

<ul>
    {% for item in xx %}
        {% if item == "alex" %}
            <li style="color: red;">{{item}}</li>
        {% else %}
            <li>{{item}}</li>
        {% end %}
    {% end %}
</ul>

八、模板語言自定義函數

1)目錄結構以下：

2）在s1.py同級目錄中增長uimethod.py，並在uimethod.py中定義方法：

#!/usr/bin/env python
# -*- coding:utf-8 -*-

def func(self,arg):
    return "123"

uimethod.py

3）在s1.py中導入uimethod.py，import uimethod as mt，並在settings中進行配置

'ui_methods':mt,html中可使用函數了<h1>{{func(npm)}}</h1>

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web
import uimethod as mt

INPUT_LIST = []
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST, npm="NPM")  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self,*args,**kwargs):
        re = self.get_argument('user',None) #獲取html傳過來的user對應的參數值
        if re:
            INPUT_LIST.append(re)
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST)  #返回html


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
    'ui_methods':mt,  #自定義函數路徑配置，表示來自mt,mt是從uimethod導入的
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sss/common.css" />
</head>
<body>
    <form method="post" action="/index">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>

    <ul>
        {% for item in xx %}
            {% if item == "alex" %}
                <li style="color: red;">{{item}}</li>
            {% else %}
                <li>{{item}}</li>
            {% end %}
        {% end %}
    </ul>
    <h1>{{func(npm)}}</h1>

    <script src="sss/oldboy.js"></script>
</body>
</html>

s1.html

結果以下圖：

執行順序：

A、執行s1.py，

self.render('s1.html',xx = INPUT_LIST, npm="NPM")  #由於配置了全局文件路徑，因此s1.html表示template/s1.html

B、執行s1.html中的模板語言，遇到自定義函數，npm = "NPM"

<h1>{{func(npm)}}</h1>

C、根據settings配置和導入模塊執行uimethod.py函數，arg = npm = "NPM"

def func(self,arg):
    return arg

九、模板語言自定義類

1）目錄結構以下

2）在s1.py同級目錄中增長uimodule.py，並在uimodule.py中定義方法：

#!/usr/bin/env python
# -*- coding:utf-8 -*-

from tornado.web import UIModule
from  tornado import escape

class custom(UIModule):
    def render(self, *args, **kwargs):
        #return escape.xhtml_escape('<h1>sunshuhai</h1>')
        return 'Hello world!'

uimodule.py

3）在s1.py中導入uimodule.py，import uimodule as md，並在settings中進行配置

'ui_modules':md,html中可使用函數了<h1>{% module custom() %}</h1>

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web
import uimethod as mt
import uimodule as md

INPUT_LIST = []
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST, npm="NPM")  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self,*args,**kwargs):
        re = self.get_argument('user',None) #獲取html傳過來的user對應的參數值
        if re:
            INPUT_LIST.append(re)
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST)  #返回html


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
    'ui_methods':mt,  #自定義函數路徑配置，表示來自mt,mt是從uimethod導入的
    'ui_modules':md,  #自定義類路徑配置，表示來自md,md是從uimodule導入的
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sss/common.css" />
</head>
<body>
    <form method="post" action="/index">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>

    <ul>
        {% for item in xx %}
            {% if item == "alex" %}
                <li style="color: red;">{{item}}</li>
            {% else %}
                <li>{{item}}</li>
            {% end %}
        {% end %}
    </ul>
    <h1>{{func(npm)}}</h1>
    <h1>{% module custom() %}</h1>

    <script src="sss/oldboy.js"></script>
</body>
</html>

s1.html

4)最終顯示結果以下：

十、模板中默認的字段、函數

在模板中默認提供了一些函數、字段、類以供模板使用：

escape: tornado.escape.xhtml_escape 的別名
xhtml_escape: tornado.escape.xhtml_escape 的別名
url_escape: tornado.escape.url_escape 的別名
json_encode: tornado.escape.json_encode 的別名
squeeze: tornado.escape.squeeze 的別名
linkify: tornado.escape.linkify 的別名
datetime: Python 的 datetime 模組
handler: 當前的 RequestHandler 對象
request: handler.request 的別名
current_user: handler.current_user 的別名
locale: handler.locale 的別名
_: handler.locale.translate 的別名
static_url: for handler.static_url 的別名
xsrf_form_html: handler.xsrf_form_html 的別名

Tornado默認提供的這些功能其實本質上就是 UIMethod 和 UIModule

1）static_url配件html靜態文件路徑，具備緩存功能，靜態文件更新後才從新下載

<link rel="stylesheet" href="{{static_url('common.css')}}" />

<script src="{{static_url('oldboy.js')}}"></script>

代碼以下：

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import tornado.ioloop
import tornado.web
import uimethod as mt
import uimodule as md

INPUT_LIST = []
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST, npm="NPM")  #由於配置了全局文件路徑，因此s1.html表示template/s1.html
    def post(self,*args,**kwargs):
        re = self.get_argument('user',None) #獲取html傳過來的user對應的參數值
        if re:
            INPUT_LIST.append(re)
        #self.write("Hello, world")
        self.render('s1.html',xx = INPUT_LIST)  #返回html


settings = {
    'template_path':'template', #配置全局文件路徑爲:template
    'static_path':'static',  #配置html中的靜態文件路徑爲static
    'static_url_prefix':'/sss/',  #靜態路徑的前綴，html實際是存放在static中，但html中引用是用sss
    'ui_methods':mt,  #自定義函數路徑配置，表示來自mt,mt是從uimethod導入的
    'ui_modules':md,  #自定義類路徑配置，表示來自md,md是從uimodule導入的
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/",MainHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

s1.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{static_url('common.css')}}" />
</head>
<body>
    <form method="post" action="/index">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>

    <ul>
        {% for item in xx %}
            {% if item == "alex" %}
                <li style="color: red;">{{item}}</li>
            {% else %}
                <li>{{item}}</li>
            {% end %}
        {% end %}
    </ul>
    <h1>{{func(npm)}}</h1>
    <h1>{% module custom() %}</h1>

    <script src="{{static_url('oldboy.js')}}"></script>
</body>
</html>

s1.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

def func(self,arg):
    return arg

uimethod.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-

from tornado.web import UIModule
from  tornado import escape

class custom(UIModule):
    def render(self, *args, **kwargs):
        #return escape.xhtml_escape('<h1>sunshuhai</h1>')
        return 'Hello world!'

ui_module.py

#h{
    color: red;
}

common.css

console.log('aaa')

oldboy.js

十一、模板語言的實質

模板語言的實質是將html字符串分隔以後，再進行的拼接，以下圖：

下面代碼是執行有變量的字符串函數：

#!/usr/bin/env python
# -*- coding:utf-8 -*-

code ="""
def helocute():
    return "name %s,age %d" %(name,data[0],)
"""

func = compile(code,'<string>','exec')
nameplace = {'name':'sunshuhai','data':[18,73,84]}
exec(func,nameplace)  #將函數func（此時func指向helocute函數）加入到字典nameplace
result = nameplace['helocute']()
print(result)  #結果：name sunshuhai,age 18

執行字符串代碼

十二、跳轉頁面

self.redirect("/login.html")

1三、Cookie的用法

1）、設置Cookie

def set_cookie(self, name, value, domain=None, expires=None, path="/",expires_days=None, **kwargs):

name,value 鍵值對

domain 域名

expires 到期時間，time.time()+10 表示10秒後過時，time.time()表示當即過時

expires_days 表示多少天后過時

2）獲得cookie

co = self.get_cookie("auth")

3)加密的cookie,配置settings，字符串爲加鹽字符串，能夠隨便設置

settings = {
    'cookie_secret':'qerqrdfd12dds',
}

設置加密cookie:

self.set_secure_cookie("auth","wuzheng")

獲取加密cookie:

co = self.get_secure_cookie("auth")  #結果返回b'wuzheng',是字節類型

co1 = str(co,encoding='utf-8')   #轉化爲字符串類型，co1="wuzheng"

4)實例：

#!/usr/bin/env python
# -*- coding:utf-8 -*-


import tornado.ioloop
import tornado.web
import time

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #self.write("Hello, world")
        self.render('index.html')  #由於配置了全局文件路徑，因此s1.html表示template/s1.html


class ManagerHandler(tornado.web.RequestHandler):
    def get(self,*args,**kwargs):
        #co = self.get_cookie("auth")
        co = self.get_secure_cookie("auth")  #返回b'wuzheng',是字節類型
        co1 = str(co,encoding='utf-8')   #轉化爲字符串類型
        print(co1)
        if co1 == "wuzheng":
            self.render('manager.html')
        else:
            self.redirect("\login")


class LogInHandler(tornado.web.RequestHandler):
    def get(self,*args,**kwargs):
        self.render('login.html',status="")
    def post(self,*args,**kwargs):
        username = self.get_argument("username",None)
        password = self.get_argument("password",None)
        if username == "sunshuhai" and password == "123":
            #self.set_cookie("auth","1")
            #self.set_cookie("auth,","wuzheng",expires_days=7) #expires_days表示7天后cookie過時

            #r = time.time() + 10
            #self.set_cookie("auth,","wuzheng",expires=r) #表示10秒後過時

            #self.set_cookie("auth,","wuzheng",expires=time.time()) #表示當即過時
            self.set_secure_cookie("auth","wuzheng")
            self.render("index.html")
        else:
            self.render('login.html',status = "用戶名密碼錯誤！")


class LogOutHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.set_cookie("auth","0")  #將cookie中auth的值改掉
        self.redirect("/login")
settings = {
    'template_path':'views', #配置全局文件路徑爲:template
    'cookie_secret':'qerqrdfd12dds',
}
#路由映射
application = tornado.web.Application([
    (r"/index", MainHandler),
    (r"/manager",ManagerHandler),
    (r"/login",LogInHandler),
    (r"/logout",LogOutHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

index.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>個人首頁</h1>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/login" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input  type="submit" value="登錄">
        <span style="color:red;">{{status}}</span>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="/logout">退出登錄</a>
    <h1>銀行卡餘額爲：-1500元</h1>
</body>
</html>

manager.html

1四、Ajax用法

1）概述

Ajax主要就是用【XmlHttpRequest】對象來完成請求的操做，該對象在主流瀏覽器中均存在（除另類IE）,實際上是不刷新頁面的前提下偷偷的經過瀏覽器向服務器發送請求

2）XmlHttpRequest對象的主要方法

a ) void open(String method,String url,Boolen async)

用於建立請求

參數：

method 請求方式（字符串類型），如POST、GET、DELETE

url 要請求的地址（字符串類型）

async 是否異步（布爾類型），默認爲true,若是設置爲false那麼頁面會hold住，完成前不能作其餘的事情，因此通常設置爲默認的true

b）void send(String body)

用於發送請求

c） void setRequestHeader(String header,String value)

用於設置請求頭，參數：header:請求頭key(字符串類型)

參數：value：請求頭的value(字符串類型)

d）、String getAllResponseHeaders()

獲取全部響應頭

e）void abort()

終止請求

2）XmlHttpRequest對象的主要屬性

a)Nmber ReadyState

狀態值（整型）：

詳細：

0-未初始化，還沒有調用open() 方法

1-啓動，調用了open()方法，未調用send()方法

2-發送，調用了send()方法，未收到相應

3-接收，已經接收到部分響應數據

4-完成，已經接收都全響應部數據

b)Function onreadystatechange

當readyState的值改變時自動觸發執行其對應的函數（回調函數）

c)String responseText

服務器返回的數據（字符串類型）

d)XmlDocument responseXML

服務器返回的數據（Xml對象）

e)Number states

狀態碼（整數），如：200 404 。。。。

f)String statesText

狀態文本（字符串），如：OK、NotFound......

3）原生Ajax的實例：

#!/usr/bin/env python
# -*- coding:utf-8 -*-


import tornado.ioloop
import tornado.web


class LogInHandler(tornado.web.RequestHandler):
    def get(self,*args,**kwargs):
        self.render('login.html')
    def post(self,*args,**kwargs):
        dic = {"result":True,"message":""}
        user = self.get_argument("username")
        pwd = self.get_argument("password")
        #print(user,pwd)
        if user == "sunshuhai" and pwd == "123":
            pass
        else:
            dic["result"]=False
            dic["message"]="登錄失敗"
        import json
        dicStr = json.dumps(dic)
        self.write(dicStr)


settings = {
    'template_path':'views', #配置全局文件路徑爲:template
}
#路由映射
application = tornado.web.Application([
     (r"/login",LogInHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

index.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text" name="username">
    <input id="t2" type="password" name="password">
    <input  type="button" value="登錄" onclick="SubmitForm()">
    <script>
        xhr = null;
        function SubmitForm() {
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange=func;
            xhr.open("POST","/login");
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            //xhr.send("username=alex;password=123");

            var user = document.getElementById("t1").value  //得到用戶名
            var pwd = document.getElementById('t2').value //得到密碼
            xhr.send("username=" +user+ ";password=" + pwd)
        }
        function func() {
            console.log(xhr.readyState)  //每次readyState的變化該函數都會捕獲到
            if(xhr.readyState == 4){
                console.log(xhr.responseText);  //請求完畢後服務器返回的內容
                var resContent = xhr.responseText;
                var resJson = JSON.parse(resContent); //將獲取的內容轉化爲js,json對象
                if(resJson["result"]){
                    alert("登錄成功！")
                }else{
                    alert("登錄失敗！")
                }
            }
        }
    </script>
</body>
</html>

4）JQuery下的Ajax實例

#!/usr/bin/env python
# -*- coding:utf-8 -*-


import tornado.ioloop
import tornado.web


class LogInHandler(tornado.web.RequestHandler):
    def get(self,*args,**kwargs):
        self.render('login.html')
    def post(self,*args,**kwargs):
        dic = {"result":True,"message":""}
        user = self.get_argument("username")
        pwd = self.get_argument("password")
        #print(user,pwd)
        if user == "sunshuhai" and pwd == "123":
            pass
        else:
            dic["result"]=False
            dic["message"]="登錄失敗"
        import json
        dicStr = json.dumps(dic)
        self.write(dicStr)


settings = {
    'template_path':'views', #配置全局文件路徑爲:template
    'static_path':'static',
}
#路由映射
application = tornado.web.Application([
     (r"/login",LogInHandler),
],**settings)   #**settings是讓配置生效

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

index.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text" name="username">
    <input id="t2" type="password" name="password">
    <input  type="button" value="登錄" onclick="SubmitForm()">
    <script src= {{static_url('jquery.js')}}></script>
    <script>
        function SubmitForm() {
            $.post('/login',{"username":$('#t1').val(),"password":$('#t2').val()},function (callback) {
                console.log(callback)  //callback爲服務器響應的結果
            })
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。