JSONP_jquery를 통해 jquery에서 ajax 메서드를 원격으로 호출하는 방법

JSONP의 개념과 JSONP를 사용하는 이유에 대한 튜토리얼이 인터넷에 많이 있습니다. 이 섹션에서는 주로 JSONP를 통해 JQUERY에서 ajax 메서드를 원격으로 호출하는 방법을 보여줍니다.

먼저 $.ajax의 매개 변수를 소개합니다.
유형: 요청 방법 GET/POST
url: 요청 주소
async: 부울 유형, 기본값은 요청이 비동기인지 여부를 나타내는 true이고, false인 경우 동기를 나타냅니다.
dataType: 반환된 데이터 유형
jsonp: jsonp 콜백 함수 이름을 얻기 위해 요청 핸들러 또는 페이지에 전달되는 매개변수 이름(일반적으로 기본값은 callback)
jsonpCallback: 사용자 정의된 jsonp 콜백 함수 이름, 기본값은 jQuery가 자동으로 생성한 임의의 함수 이름입니다. "?"를 쓸 수도 있습니다. 그러면 jQuery가 자동으로 데이터를 처리합니다.
성공: 성공적으로 실행된 함수 호출
오류: 예외 처리 함수

1.예제 1
서버측에서는 MVC의 ACTION을 사용하여 데이터를 반환합니다

코드 복사 코드

public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
returnView( );
}

public ActionResult ReturnJson()
{
string callback = Request.QueryString["callback"]
string json = " {'name':'Zhang三','age':'20'}";
string result = string.Format("{0}({1})", callback, json);
returnContent (결과);
}

}

클라이언트가 jsonp를 사용하여 데이터를 전송합니다

코드 복사 코드는 다음과 같습니다.

@{
ViewBag.Title = "Index"
Layout = "~/Views/Shared/_Layout.cshtml ";
}


< ;script type="text/javascript"> ;
functionSendData()
{
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
데이터 유형: "jsonp",
성공: 함수(데이터){
alert(data.name)
},
오류: 함수(){
alert('fail');
}
})
}

제출 버튼을 클릭한 후 서버 측의 Request.QueryString["callback"]이 임의의 함수 이름을 반환한 것을 발견했습니다. 이런 식으로 데이터를 전송하기 위해 JSONP 형식으로 설정됩니다

2. 사용자 정의 함수 이름
전송 프로세스 중에 함수 이름을 사용자 정의할 수 있습니다. jsonpCallback 매개변수를 사용하면 됩니다.
jsonp: 전달된 매개변수를 나타내며, 기본값은 콜백이며, 서버 세그먼트는 이 매개변수를 사용하여 사용자 정의된 함수 이름을 얻습니다.
jsonpCallback은 전달을 나타냅니다. 매개변수 값은 사용자 정의 이름인 콜백 함수 이름입니다.

코드 복사 코드는 다음과 같습니다.