前端学习心得(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");
    			}
            })
        }
    )
}

效果:

前端学习心得(20211202)

上一篇:NXOpen-创建固定约束


下一篇:Spring Boot中如何扩展XML请求和响应的支持