投聚财经
您的当前位置:首页JS实现Ajax跨域请求flask响应内容

JS实现Ajax跨域请求flask响应内容

来源:投聚财经


Ajax方法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应。本文主要为大家详细介绍了JS实现Ajax跨域请求flask响应内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

主要技术:

修改服务器相应的相应头,使其可以相应任意域名。and设置响应头,使其能够相应POST方法。

实现代码:

这里先放flask代码:


html测试代码:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<span id="ss">test get</span>
<button onclick="getAjax()">click</button>

 <p id="time">test post</p>
 <input type="submit" value="click" onclick="getPostAjax()">


<script>
 function getPostAjax() {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange=function () {
 if(xmlhttp.readyState=4 && xmlhttp.status ==200 ) {
 document.getElementById("time").innerText = xmlhttp.responseText;
 }
 }

 xmlhttp.open("POST","http://localhost:5000/test",true);
 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 #这句话可以发送post数据,没有此句post的内容无法传递
 xmlhttp.send();


 }

 function getAjax() {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange=function () {
 if(xmlhttp.readyState==4 && xmlhttp.status == 200){
 document.getElementById("ss").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","http://localhost:5000/test",true);
 xmlhttp.send();
 }
</script>
</body>
</html>

无法控制响应头

对于这种情况,get请求可以使用jquery完成,post,为力。

大家学会了吗?赶紧动手尝试一下吧。

显示全文