jQuery+JSONP 크로스 도 메 인 요청 해결 방안

JSONP(JSON with Padding)는 JSON 의'사용 모드'로 주류 브 라 우 저의 크로스 도 메 인 데이터 접근 문 제 를 해결 할 수 있 습 니 다.같은 소스 정책 으로 인해 일반적으로 server 1.example.com 에 있 는 웹 페이지 는 server 1.example.com 이 아 닌 서버 와 소통 할 수 없 으 며 HTML 의요 소 는 예외 입 니 다.요 소 를 이용 한 이 개방 정책 은 웹 페이지 에서 다른 소스 에서 동적 으로 생 성 된 JSON 자 료 를 얻 을 수 있 습 니 다.이러한 사용 모델 은 바로 JSONP 입 니 다.JSONP 으로 잡 은 자 료 는 JSON 이 아 닌 임의의 자 바스 크 립 트 로 JSON 해석 기 가 아 닌 자 바스 크 립 트 직역 기로 실 행 됩 니 다.
『8195』위의 말 은 바 이 두 백과 에서 왔 는데 개념 은 영원히 추상 적 이 고 이해 하기 어 려 우 며 예 를 보 는 것 이 가장 직관 적 인 표현 이다.예 를 많이 보고 그 점 을 깨 닫 게 되면 자연히 자신 도 추상 적 인 묘 사 를 배 울 것 이다.'지식 을 배 우 는 것 은 얇 은 것 에서 두 꺼 운 것,두 꺼 운 것 에서 얇 은 것 으로 가 는 과정'이 라 고 자주 말 하 는 이유 다.됐어.멀리 갔 어.다음은 직접 예 를 들 어 보 겠 습 니 다.

질문:로 컬 에 있 는 페이지 demo.html 에서http://localhost:3561/User/GetAllNames데 이 터 를 가 져 와 보 여 줍 니 다.
해답:문제 중의 두 측 이 같은 서버 에 없 기 때문에 jsonp 를 사용 하여 도 메 인 을 넘 어 방문 해 야 합 니 다.
① 클 라 이언 트 작성
클 라 이언 트 는 jQuery 에서 제공 하 는$.getJSon 방법 으로 도 메 인 을 방문 합 니 다.getJSon 에는 세 개의 인자 가 있 습 니 다:
I. url:요청 주소;
II. data:서버 에 보 내 는 인자;
『8195』,『8195』,『8195』,III.callback:성공 시의 반전 함수.
getJSon 의 사용 방법 은 일반적인$.get 방법 과 대체적으로 일치 합 니 다.다른 점 은 getJSon 이 url 뒤의 매개 변수 부분 에 callback=을 추가 해 야 한 다 는 것 입 니까?이 고정 부분 은 jQuery 가 자동 으로 바 꿉 니까?정확 한 함수 명 을 위해 리 셋 함 수 를 실행 합 니 다.그리고 리 셋 함수 에서 이역 에서 돌아 오 는 json 대상 을 조작 합 니 다.리 셋 함수 callback 의 매개 변 수 는 이 json 대상 입 니 다.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

② 서버 작성
서버 의 논 리 는 주로 데 이 터 를 json 문자열 로 정렬 한 다음 에'callback(json)'형식 으로 봉 인 됩 니 다.callback 은 jQuery 로 자동 으로 생 성 되 고 서버 에 전달 되 는 함수 이름 입 니 다.다음은 C\#실현 을 사용 합 니 다:


public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format("{0}({1})", callback, json);
  }
}

이로써 문 제 를 성공 적 으로 해결 했다.

생각:서버 에서 콜백 을 죽 였 다 면(예:return string.Format("moty({0})",json),그럼 클 라 이언 트 는 어떻게 써 야 하나 요?
참고:


$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

springboot 크로스 도 메 인 문제 해결

1. 전역 전역 혹시 2. 주석 사용 (부분 크로스) 또는 컨트롤 러 (@ Controller) 에 주 해 를 사용 합 니 다 @ CrossOrigin: 3. 응답 헤드 수 동 설정 (부분 크로스) Access - ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery+JSONP 크로스 도 메 인 요청 해결 방안

좋은 웹페이지 즐겨찾기