JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다.-JS 튜토리얼-php.cn

JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다.

小云云

풀어 주다： 2018-01-03 16:26:12

원래의

1754명이 탐색했습니다.

Ajax 방식이 좋고 웹사이트가 고급스러운 느낌이 듭니다. 하지만 Js의 한계로 인해 크로스 도메인 Ajax를 구현할 수는 없습니다. 여기서는 제어할 수 있어야 한다는 전제가 있습니다. 플라스크 측의 반응. 이 글은 주로 Ajax 크로스 도메인 요청 플라스크 응답 내용의 JS 구현을 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

주요 기술:

모든 도메인 이름에 대응할 수 있도록 서버의 해당 헤더를 수정합니다. POST 메소드에 대응할 수 있도록 응답 헤더를 설정합니다.

구현 코드:

Flask 코드를 여기에 먼저 넣으세요:

from flask import make_response
@app.route(&#39;/test&#39;,methods=[&#39;get&#39;,&#39;post&#39;])
def Test():
 if request.method==&#39;GET&#39;:
  rst = make_response(&#39;aaa&#39;)
  rst.headers[&#39;Access-Control-Allow-Origin&#39;] = &#39;*&#39; #任意域名
  return rst
 else:
  rst = make_response(&#39;bbb&#39;)
  rst.headers[&#39;Access-Control-Allow-Origin&#39;] = &#39;*&#39;
  rst.headers[&#39;Access-Control-Allow-Methods&#39;] = &#39;POST&#39; #响应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>

로그인 후 복사

응답 헤더를 제어할 수 없습니다

이 상황에서는 jquery를 사용하여 get 요청을 완료할 수 있습니다. , 게시, 아무것도 할 수 없습니다.

아직 배우셨나요? 서둘러서 한번 시도해 보세요.