原生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条件判断使用小技巧总结
Sep 08 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
七个很有意思的PHP函数
May 12 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
angular异步验证器防抖实例详解
Mar 31 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简单的留言板与回复功能具体实现
2014/02/19 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python 容器总结整理
2017/04/04 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
C#面试问题
2016/07/29 面试题
优秀女职工事迹材料
2014/02/06 职场文书
服务理念口号
2014/06/11 职场文书
师范大学生求职信
2014/06/13 职场文书
教师工作失职检讨书
2014/09/18 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年药房工作总结
2014/11/22 职场文书
2015党建工作简报
2015/07/21 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android