네이티브 JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다(그래픽 튜토리얼)-JS 튜토리얼-php.cn

네이티브 JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-22 09:37:59

원래의

1608명이 탐색했습니다.

이 글은 주로 Ajax 크로스 도메인 요청 플라스크 응답 콘텐츠의 JS 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

Ajax 방식이 좋고 웹사이트가 고급스러워 보입니다. JS Cross-domain Ajax는 구현할 수 없습니다. 여기서는 플라스크 측에서 응답을 제어할 수 있어야 한다는 전제하에 솔루션에 대해 이야기하겠습니다.

주요 기술:

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

구현 코드:

여기에 먼저 플라스크 코드를 넣으세요:

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>

로그인 후 복사

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

이 상황에서는 get 요청이 jquery, post를 사용하여 완료될 수 있으며 아무 것도 할 수 없습니다. . 현재는 앞부분과 뒷부분을 모두 쓰고 있어서 당분간 이런 상황은 고려하지 않겠습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

jQuery+ajaxjson을 읽고 정렬하는 방법에 대한 자세한 설명

jQuery+Ajax로 사용자 이름 확인

AJAX의 XML을 예시로 설명

위 내용은 네이티브 JS는 Ajax 도메인 간 요청 플라스크 응답 콘텐츠를 구현합니다(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!