您好,欢迎访问一九零五行业门户网

原生JS实现Ajax跨域请求flask响应内容(图文教程)

这篇文章主要为大家详细介绍了js实现ajax跨域请求flask响应内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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,无能为力。目前前后端均我一人编写,暂不考虑虑此情况。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
jquery+ajax读取json并排序方法详解
jquery+ajax验证用户名
关于ajax中 xml 的实例讲解
以上就是原生js实现ajax跨域请求flask响应内容(图文教程)的详细内容。
其它类似信息

推荐信息