Ajax簡介 一門非同步的載入技術，局部刷新 非同步載入，可以在不重載整個網頁的前提下，進行局部刷新 分為原生和JQ兩種 JSON數據格式 Json對象轉字元串： JSON.stringify() 字元串轉Json對象：JSON.parse() 前後端數據交互 html文件 py文件 Ajax局部刷新 ...
Ajax簡介
- 一門非同步的載入技術，局部刷新
- 非同步載入，可以在不重載整個網頁的前提下，進行局部刷新
- 分為原生和JQ兩種
JSON數據格式
- Json對象轉字元串： JSON.stringify()
- 字元串轉Json對象：JSON.parse()
<script type="text/javascript">
var obj = {"name": "JiYu", "age": "99"};
//json數據 可讀可寫
console.log(obj);
console.log(typeof obj);
console.log(obj.name);
obj.name = "NianHua";
console.log(obj);
// json遍歷
for (var key in obj) {
console.log(key + ":" + obj[key])
}
// json對象轉字元串
var obj_string = JSON.stringify(obj);
console.log(obj_string);
console.log(typeof obj_string);
// 字元串對象轉json：鍵值對的引號必須是雙引號
var obj_json = JSON.parse(obj_string);
console.log(obj_json);
console.log(typeof obj_json);
</script>前後端數據交互
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前後端數據交互</title>
</head>
<body>
<form action="/" method="post">
用戶名：<input type="text" placeholder="請輸入用戶名" name="user"><br>
密 碼：<input type="password" placeholder="請輸入密碼" name="pwd"><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>- py文件
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("Demo.html")
def post(self):
user = self.get_argument("user")
pwd = self.get_arguments("pwd")
print("用戶名：",user)
print("密碼：",pwd)
if __name__ == "__main__":
# 路由
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()Ajax局部刷新
- 導入jquery
- 使用方式
- $.ajax({...})
- $.get({...})
- $.post({...})
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax局部刷新</title>
</head>
<body>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c"><br>
<button id="btn">計算</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 獲取元素
var inp = $("input");
var btn = $("#btn");
btn.click(function () {
// 獲取元素值
var a = inp.eq(0).val();
var b = inp.eq(1).val();
// 方法一：ajax
$.ajax({
//get、post不用寫type
'type': 'post',
// 提交的地址
'url': '/',
// 傳給後臺的數據
'data': {
'aaa': a,
'bbb': b
},
// 成功之後的回調函數
'success': function (data1) {
res = data1['result'];
inp.eq(2).val(res);
}
})
// 方法二：get
// $.get({});
// 方法三：post
// $.post({});
})
</script>
</body>
</html>- py文件
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("Demo.html")
def post(self):
# 根據鍵取前臺傳來的值
a = int(self.get_argument('aaa'))
b = int(self.get_argument('bbb'))
result = a + b
return_data = {'result':result}
# 返回數據
self.write(return_data)
if __name__ == "__main__":
# 路由
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
