原生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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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 adodb连接不同数据库
2009/03/19 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php获取根域名方法汇总
2014/10/28 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js 操作符实例代码
2009/10/24 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
和孩子一起学习python之变量命名规则
2018/05/27 Python
python requests证书问题解决
2019/09/05 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
个人四风问题整改措施
2014/10/24 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python