ajax前端發送普通數據:
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "POST",
data:{"head":"hello lyshark"},
success:function(data){
if(data=="1"){
alert("請求已經提交.");
}
},
error:function(){
alert("執行失敗了...")
}
});
}
</script>
<form action="/dataFromAjax" method="post">
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['GET'])
def recv():
data = request.args.get("head")
if(data==""):
return "0"
else:
print("收到客戶{} ".format(data))
return "1"
if __name__ == '__main__':
app.run()
ajax前端發送JSON數據:
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({"username":username,"password":password}),
success:function(result){
alert("執行成功...");
},
error:function(){
alert("執行失敗了...");
}
});
}
</script>
<form action="/dataFromAjax" method="post">
用戶賬號: <input type="text" placeholder="用戶賬號" name="username" /><br><br>
用戶密碼: <input type="text" placeholder="用戶密碼" name="password" /><br><br>
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
from flask import jsonify
import json
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
data = request.get_data()
json_data = json.loads(data)
print(json_data)
username = json_data.get("username")
print(username)
return render_template("index.html")
if __name__ == '__main__':
app.run()
ajax前端發送數據並攜帶token
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
var token = $('input[name="token"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
headers:{"Authorization":token}, <!--此處攜帶token-->
success:function(result){
alert("執行成功...");
},
error:function(){
alert("執行失敗了...");
}
});
}
</script>
<form action="/dataFromAjax" method="post">
設置token: <input type="text" placeholder="用戶賬號" name="token" /><br>
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
import json
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
token = request.headers.get("Authorization")
print(token)
return render_template("index.html")
if __name__ == '__main__':
app.run()
ajax接收服務器返回數據
<body>
<input type="button" class="MyButton" value="接收數據" onclick="GetAjax()">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "GET",
success:function(data){
alert("姓名: " + data.name + "年齡: " + data.age);
},
error:function(){
alert("執行失敗了...")
}
});
}
</script>
</body>
from flask import Flask,render_template,request
from flask import jsonify
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
info = dict()
info['name'] = "lyshark"
info['age'] = 22
return jsonify(info)
if __name__ == '__main__':
app.run()