青龍面板之穩定羊毛
阿新 • • 發佈：2022-04-21
Ajax
json
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> json </title> </head> <body> <script> // js 物件 var obj = {'name':'beauti','age':18}; console.log(obj); // {name: 'beauti', age: 18} console.log(typeof obj); // object // 定義 json 字串 var obj1 = "{'name':'beauti','age':18}"; console.log(obj1); // {'name':'beauti','age':18} console.log(typeof obj1); // string // js 物件轉換 json 物件 stringify var str = JSON.stringify(obj); console.log(str); // {"name":"beauti","age":18} console.log(typeof str); // string // json 字串轉換為 js 物件 parse var obj2 = JSON.parse(str); console.log(obj2); // {name: 'beauti', age: 18} console.log(typeof obj2); // object </script> </body> </html>
如何實現前後端互動
1、新建py檔案
第一步：匯入tornado庫
import tornado
如果沒有 tornado 庫，就在後端 Terminal 下載 pip install tornado
第二步：開啟web頁面
import tornado.web
按住 ctrl 點選 web 開啟web.py 頁面
第三步：複製 25行-37行 內容到py檔案
import tornado.ioloop import tornado.web class MainHandler(tornado.web.RequestHandler): def get(self): self.write("Hello, world") if __name__ == "__main__": application = tornado.web.Application([ (r"/", MainHandler), ]) application.listen(8888) tornado.ioloop.IOLoop.current().start()
2、判斷後端是否已經執行
第一步：瀏覽器開啟：127.0.0.1:8888
本地的 IP 地址：127.0.0.1
預設埠：8888
第二步：進入頁面後，如成功列印內容，即後端執行成功
後端 py 檔案
# 自定義 MainHandler 類 class MainHandler(tornado.web.RequestHandler): # get(）訪問請求 def get(self): # 在瀏覽器中寫入內容 self.write("Hello, world") if __name__ == "__main__": application = tornado.web.Application([ # r"/" 路由，呼叫 MainHandler 方法 (r"/", MainHandler), ]) application.listen(8888) # 預設埠 8888 tornado.ioloop.IOLoop.current().start()
自己寫 form表單.py
思路：瀏覽器輸入 url 路由，到達前端頁面，使用者輸入資訊，點選提交按鈕後，資訊能傳輸給後端並列印
程式碼示例：
後端：form 表單.py 檔案
import tornado.ioloop
import tornado.web
# 自定義 MainHandler 類
class MainHandler(tornado.web.RequestHandler):
# get(）訪問請求 獲取資料
def get(self):
# render 響應介面
self.render(r'form.html')
# post 提交資料
def post(self):
a = self.get_argument('user'); # 獲取使用者名稱
b = self.get_argument('pwd'); # 獲取密碼
print(a,b);
self.write('成功進入');
if __name__ == "__main__":
application = tornado.web.Application([
# r"/form" 自定義路由 呼叫 MainHandler 方法
(r"/form", MainHandler),
])
application.listen(8888) # 預設埠 8888
tornado.ioloop.IOLoop.current().start()
前端：form.html 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> form 表單 </title>
</head>
<body>
<form action="/form" method="post">
<!-- get 是用來從伺服器上獲得資料，post 是用來向伺服器傳遞資料 -->
使用者名稱：<input type="text" name="user" placeholder="請輸入使用者名稱"><br>
密  碼：<input type="password" name="pwd" placeholder="請輸入密碼"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
實現效果：
第一步：瀏覽器輸入：127.0.0.1:8888/form 進入前端頁面
第二步：頁面輸入使用者資訊，按提交按鈕
第三步：後端能列印使用者輸入的資訊
寫多個 form 表單
案例：計算器
程式碼示例：
後端： form表單.py 檔案
import tornado.ioloop
import tornado.web
# 自定義 MainHandler 類
class MainHandler(tornado.web.RequestHandler):
# get(）訪問請求 獲取資料
def get(self):
# render 響應介面
self.render(r'form.html')
# post 提交資料
def post(self):
a = self.get_argument('user'); # 獲取使用者名稱
b = self.get_argument('pwd'); # 獲取密碼
print(a,b);
self.write('成功進入');
class AjaxHandler(tornado.web.RequestHandler):
# get(）訪問請求 獲取資料
def get(self):
# render 響應介面
self.render(r'ajax.html')
# post 提交資料
def post(self):
a = self.get_argument('aa');
b = self.get_argument('bb');
print(a,b);
res = int(a) + int(b);
return_data = {'result':res};
self.write(return_data);
if __name__ == "__main__":
application = tornado.web.Application([
# r"/form" 自定義路由 呼叫 MainHandler 方法
(r"/form", MainHandler),
(r"/ajax", AjaxHandler),
])
application.listen(8888) # 預設埠 8888
tornado.ioloop.IOLoop.current().start()
前端：ajax.html 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Json + JQ 實現 Ajax </h1>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c">
<button id="btn">計算</button>
<!-- 引入JQuery -->
<!-- 本地檔案會有問題，有bug，後續 Django 會使用靜態代理伺服器 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var inpu = $('input'),btn = $('#btn');
// 獲取元素的值
btn.click(function () {
var a = inpu.eq(0).val();
var b = inpu.eq(1).val();
// 測試是否獲取到值
// alert(a+b);
// 傳送請求
$.ajax({
// 傳送資料給後臺 json 資料格式
// 請求型別
'type':'post',
// 路由
'url':'/ajax',
// 資料有哪些
'data':{
'aa':a,
'bb':b
},
// 接收後端傳送過來的資料
'success':function (data) {
res = data['result'];
inpu.eq(2).val(res);
},
'error':function (error) {
console.log(error);
}
})
})
</script>
</body>
</html>
實現效果：
第一步：瀏覽器輸入：127.0.0.1:8888/ajax 進入前端頁面
第二步：頁面輸入資料，按計算按鈕，可計算結果
第三步：後端能列印使用者輸入的資料