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


Posted in Javascript onOctober 24, 2017

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,无能为力。目前前后端均我一人编写,暂不考虑虑此情况。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 #Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 #Javascript
基于js中this和event 的区别(详解)
Oct 24 #Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 #Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
通俗易懂地解释JS中的闭包
Oct 23 #Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
You might like
PHP 编程安全性小结
2010/01/08 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
简单的js表格操作
2016/09/24 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python pickle模块用法实例
2015/04/14 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python和c语言的主要区别总结
2019/07/07 Python
python 并发下载器实现方法示例
2019/11/22 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
区优秀教师事迹材料
2014/02/10 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
职工食堂管理制度
2015/08/06 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python