原生JS实现Ajax跨域请求flask响应内容
更新时间：2017年10月24日 09:22:25 作者：岚漾忆雨
这篇文章主要为大家详细介绍了JS实现Ajax跨域请求flask响应内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ajax方法好，网站感觉跟高大上，但由于Js的局限，跨域Ajax无法实现，这里，讲一下解决办法，前提是需要能够自己可以控制flask端的响应。
主要技术：
修改服务器相应的相应头，使其可以相应任意域名。and设置响应头，使其能够相应POST方法。
实现代码：
这里先放flask代码：
from flask import make_response
@app.route('/test',methods=['get','post'])
def Test():
if request.method=='GET':
rst = make_response('aaa')
rst.headers['Access-Control-Allow-Origin'] = '*' #任意域名
return rst
else:
rst = make_response('bbb')
rst.headers['Access-Control-Allow-Origin'] = '*'
rst.headers['Access-Control-Allow-Methods'] = 'POST' #响应POST
return rst
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，无能为力。目前前后端均我一人编写，暂不考虑虑此情况。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近刚接触了uni-app,用于开发微信小程序,设计到了微信授权登录,下面这篇文章主要给大家介绍了关于uni-app中使用手机号一键登录的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了js实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
class尽管只算是一个语法糖,但它却是语言规范方面的一大成就,也对之前的继承进行了一定的增强,下面这篇文章主要给大家介绍了关于JavaScript面向对象之深入了解ES6的class的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了javascript判断chrome浏览器的方法，通过userAgent判断检测一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以参考下2014-03-03
window.event快达到全浏览器支持了，以后使用就方便了
在Tangram群里讨论到<a href="#" onclick="baidu.event.preventDefault(event);">的写法时，以为标准浏览器只能用arguments[0]来获取到event，结果nodiseal同学说已经可以这么用了，于是做了以下测试2011-11-11
这篇文章主要为大家详细介绍了使用js实现复制功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了Js和VUE实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码
这是本人2007年进行的一项研究，当时网络上没有什么既精简又实用的循环滚动代码，所以就自己琢磨了段时间，最终找到这个办法2011-09-09
这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了js实现带圆角的多级下拉菜单效果,通过调用封装的js库ocscript.js实现圆角下拉菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论