Axios 是一個基於promise的HTTP庫，該庫是一個更好的替代ajax向后端發送數據或請求數據的前端組件庫，其本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，如下案例運用axios向后端提交JSON字符串，后端通過Flask響應請求並處理。
前端運用Axios發送數據的兩種方式。
<html>
<head>
<meta charset="UTF-8">
<title>LyShark</title>
<script src="https://cdn.lyshark.com/javascript/axios/0.26.0/axios.min.js"></script>
</head>
<body>
<input type="text" name="name" id="name" />
<input type="text" name="age" id="age" />
<button onclick="saveHanderPost()" >提交</button>
</body>
<!-- 第一種發送方法 -->
<script type="text/javascript">
function saveHanderPost()
{
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
axios.post("/",{
name:name,
age:age
})
.then(function(response){
console.log(response);
console.log(response.data.username);
console.log(response.data.message);
})
.catch(function(error){
console.log(error);
})
}
</script>
<!-- 第二種發送方法 -->
<script type="text/javascript">
function saveHanderPostB()
{
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
axios({
url: "/",
method: "post",
data: {
name: name,
age:age
},
responseType: "text/json",
})
.then(function(response){
console.log(response);
console.log(response.data.username);
console.log(response.data.message);
})
.catch(function(error){
console.log(error);
})
}
</script>
</html>
Python后端使用Flask接收並處理前端發送過來的JSON字符串。
from flask import Flask,render_template,request
import json
app = Flask(import_name=__name__,
static_url_path='/python', # 配置靜態文件的訪問url前綴
static_folder='static', # 配置靜態文件的文件夾
template_folder='templates') # 配置模板文件的文件夾
@app.route('/', methods=["GET","POST"])
def index():
if request.method == "GET":
return render_template("index.html")
elif request.method == "POST":
val = request.get_json()
print("收到用戶: {} ---> 年齡: {}".format(val["name"],val["age"]))
# 返回JSON類型
return json.dumps({"username": "lyshark","message": "hello lyshark"})
if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)
運行后提交數據前后端均可接收到數據：
