前端学习心得（20211202）
作者：互联网
任务：前端设置一个按钮，用户点击后前端用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");
}
})
}
)
}效果：
标签：__,function,file,前端,学习心得,upload,template,app,20211202 来源： https://blog.csdn.net/weixin_40292043/article/details/121672318