JSONP_jquery를 통해 jquery에서 ajax 메서드를 원격으로 호출하는 방법-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 16:53:28

원래의

1612명이 탐색했습니다.

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은 전달을 나타냅니다. 매개변수 값은 사용자 정의 이름인 콜백 함수 이름입니다.

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