当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 原生JS实现Ajax跨域请求flask响应内容

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网