原生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简单体验
Jan 10 Javascript
JQuery select标签操作代码段
May 16 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue基础知识--axios合并请求和slot
Jun 04 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 函数中使用static的说明
2012/06/01 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
python 文件与目录操作
2008/12/24 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python绘制条形图方法代码详解
2017/12/19 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
校园安全检查制度
2014/02/03 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
企业宣传稿范文
2015/07/23 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android