任务:前端设置一个按钮,用户点击后前端用ajax包装一个url像后端flask服务器发送请求,经过后端处理,返回一个值给前端,前端将返回值反馈给用户
注意调试前先清缓存,不然每次调试的都是上次的代码
flask后端:
from flask import Flask, render_template, request, jsonify
app = Flask('My Flask', template_folder='template', static_folder='static')
@app.route('/', methods=['GET'])
def home_page():
return render_template('HomePage.html')
@app.route('/upload_file', methods=['POST'])
def upload_file():
receive = request.get_json()
return "You click upload_file button" + str(receive)
if __name__ == "__main__":
app.run(port=7855, host='127.0.0.1')
html:
<html>
<head>
<title> Home Page </title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script type="text/javascript" src="/static/js/src/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/home_page.js"></script>
</html>
js:
var originUrl = "http://127.0.0.1:7855"
window.onload = function () {
// 事件点击
$("#btn").click(
function () {
$.ajax({
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
type: "POST",
url: originUrl + "/upload_file",
dataType: 'text',
data: JSON.stringify({'qwe': 'qwe'}),
cache: false,
success: function (data) {
alert(data);
},
error: function () {
alert("error occurred");
}
})
}
)
}
效果: