네이티브 JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다(그래픽 튜토리얼)
- 亚连원래의
- 2018-05-22 09:37:591528검색
이 글은 주로 Ajax 크로스 도메인 요청 플라스크 응답 콘텐츠의 JS 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
Ajax 방식이 좋고 웹사이트가 고급스러워 보입니다. JS Cross-domain Ajax는 구현할 수 없습니다. 여기서는 플라스크 측에서 응답을 제어할 수 있어야 한다는 전제하에 솔루션에 대해 이야기하겠습니다.
주요 기술:
모든 도메인 이름에 대응할 수 있도록 서버의 해당 헤더를 수정합니다. POST 메소드에 대응할 수 있도록 응답 헤더를 설정합니다.
구현 코드:
여기에 먼저 플라스크 코드를 넣으세요:
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+ajaxjson을 읽고 정렬하는 방법에 대한 자세한 설명
위 내용은 네이티브 JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.