用Flask框架服务器和原生XMLHttpRequest对象进行AJAX信息交互

最新推荐文章于 2024-04-17 11:58:04 发布

天真的蜗牛

最新推荐文章于 2024-04-17 11:58:04 发布

阅读量484

点赞数

文章标签： flask 服务器 ajax

本文链接：https://blog.csdn.net/m0_62517790/article/details/127847386

版权

本文详细讲述了如何在Flask后端与前端JavaScript配合，解决跨域问题，并展示了如何通过POST请求实现动态内容加载。过程中涉及CORS配置和服务器端口调整，是前端开发者理解跨域限制和后端API交互的好例子。

摘要由CSDN通过智能技术生成

后端代码：

#-*- coding:utf-8 -*-
from flask import Flask, render_template, request
from flask_cors import CORS

app = Flask(__name__)
# 配置服务器的所有路由地址允许跨域javascript脚本访问
CORS(app, resources = r"/*")

# 绑定映射路径
@app.route("/")
@app.route("/name=<string:name>")
def index(name = ""):
    url = request.url
    return render_template("index.html", name=url)

@app.route("/more", methods = ["GET", "POST"])
def more():
    return f"More, more, more......<br>"

if __name__ == "__main__":
    app.run("127.0.0.1", 8000)

前端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<title>首页</title>
</head>
<body>
	<!-- <hello> -->
	&lt;hello&gt;&nbsp;<br>
	{% if name %}
	    {{name}}
	{% endif %}
	<div>
		
	</div>
	<form>
		<input type = "submit" id = "submit" value = "请求更多内容">
	</form>
</body>
</html>
<script async>
	// 为了在函数定义域中调用，XMLHttpRequest对象必须挂靠到全局变量上
	var xhr = new XMLHttpRequest();
	var button = document.getElementById("submit");
	button.onclick = function getMore(){
		// 建立连接，请求/more路径指向的内容
		xhr.open("POST", "http://localhost:8000/more", true);
        // 设置回调函数
		xhr.onreadystatechange = updatePage
		xhr.send();
	}
	function updatePage(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var response = xhr.responseText;
				write(response);
			}
			else{
				alert("错误状态码：" + xhr.status);
			}
		}
	}
	function write(text){
		var tag = document.getElementsByTagName("div")[0];
        tag.innerHTML += text;
	}
</script>

效果：

这里要提一下，一开始我在请求"localhost:8000/more"路径下的内容时，出现了跨域问题。所谓跨域问题，就是指网络协议、域名、端口三者中有一者不一致时，服务器为了保护站点信息而阻止第三方JavaScript脚本访问站点上的资源。不过后来我发现自己闹了个乌龙，其实是我修改了服务器监听的端口号，却又忘了修改JS代码里建立连接用的端口号，修改过来便好了。

顺便说一下，浏览器的控制台真是一个很好用的工具，比如这个总会自动冒出来的cookie SameSite属性跨域限制的信息，其实就是服务器默认只接受第三方站点的GET请求，不接受数据上传的意思：