您的位置：首页 > 其它

[py]tornado_原生ajax

2017-08-22 22:30 120 查看

[py]tornado_原生ajax

使用原生ajax偷偷发请求

# 业务逻辑处理模块

class LoginHandler(tornado.web.RequestHandler):
def post(self, *args, **kwargs):
pass

def get(self, *args, **kwargs):
self.render("login.html")

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
<link rel="stylesheet" href="{{ static_url("common.css") }}">
</head>
<body>
<form action="/login" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="登录" onclick="SubmitForm();" />
</form>
<script>
function SubmitForm() {
var xhr = new XMLHttpRequest();
xhr.open("GET","/login",true);
xhr.onreadystatechange=func;
xhr.send();
}
function func(arg) {

}
</script>
</body>
</html>

初探ajax

ajax状态变更

当ajax状态为4时候

查看ajax接受到哪些东西

ajax发数据给后台

ajax发数据给后台-通过js获取表单数据

后端发数据给前端

前后端数据交互

完整code

后端代码

#!/usr/bin/env python
# coding=utf-8
import time
import tornado.ioloop
import tornado.web

# 业务逻辑处理模块

class LoginHandler(tornado.web.RequestHandler):
def post(self, *args, **kwargs):
dic = {"status":True,"message":""}
username = self.get_argument("username")
password = self.get_argument("password")
if username=="admin" and password=="admin123":
pass
else:
dic["status"] = False
dic["message"]="用户名或密码错误"
import json
self.write(json.dumps(dic))
def get(self, *args, **kwargs):
self.render("login.html")

# 配置选项模块
settings = {
'template_path': 'template',
'static_path': 'statics',
}

# 路由模块
application = tornado.web.Application([
(r"/login", LoginHandler),

],
**settings
)

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

前端代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
<link rel="stylesheet" href="{{ static_url("common.css") }}">
</head>
<body>
<form action="/login" method="post">
<input id="username" type="text" name="username">
<input id="password" type="password" name="password">
<input id="submit" type="button" value="登录" onclick="SubmitForm();"/>
</form>
<script>
xhr = null;
function SubmitForm() {
xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.onreadystatechange = func;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
//        xhr.send("username=admin;password=admin123");
xhr.send("username=" + document.getElementById('username').value + ";password=" + document.getElementById('password').value);
}

function func() {
if (xhr.readyState == 4) {
console.log(1);
console.log(xhr.responseText);
var data = xhr.responseText;
var ret_dict = JSON.parse(data);
if (ret_dict.status) {

} else {
alert(ret_dict.message);
}
}
}
</script>
</body>
</html>

2017年8月22日

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航