jQuery를 사용하여 교차 도메인 Ajax JSONP 요청 만들기
JSON 어레이 데이터를 다음 코드로 jquery ajax로 해석하고 싶습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var result;
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://10.211.2.219:8080/SampleWebService/sample.do",
dataType: "jsonp",
success: function (xml) {
alert(xml.data[0].city);
result = xml.code;
document.myform.result1.value = result;
},
});
}
</script>
</head>
<body>
<p id="details"></p>
<form name="myform">
<input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
<input type="text" name="result1" readonly="true"/>
</form>
</body>
</html>
JSON 데이터는 다음과 같습니다.
{"Data": [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true}
하지만 아무 결과도 나오지 않고...누구 좀 도와주세요...
컨셉 설명
크로스 도메인 AJAX 콜을 시도하고 있습니까?즉, 서비스가 동일한 웹 애플리케이션 경로에서 호스팅되지 않는다는 의미입니까?JSONP를 실행하려면 웹 서비스가 메서드 주입을 지원해야 합니다.
코드는 정상이며 웹 서비스와 웹 응용 프로그램이 동일한 도메인에서 호스팅되는 경우 사용할 수 있습니다.
할 때$.ajax와 함께dataType: 'jsonp'즉, jQuery는 실제로 쿼리 URL에 새 파라미터를 추가하고 있습니다.
예를 들어 URL이http://10.211.2.219:8080/SampleWebService/sample.do그러면 jQuery가 추가됩니다.?callback={some_random_dynamically_generated_method}.
이 메서드는 실제로 연결된 프록시에 가깝습니다.window물건.이것은 구체적인 것은 아니지만 다음과 같습니다.
window.some_random_dynamically_generated_method = function(actualJsonpData) {
//here actually has reference to the success function mentioned with $.ajax
//so it just calls the success method like this:
successCallback(actualJsonData);
}
요약
고객 코드는 정상인 것 같습니다.그러나 JSON 데이터를 쿼리 문자열과 함께 전달된 함수 이름으로 래핑하도록 서버 코드를 수정해야 합니다.
쿼리 문자열로 요구된 경우
?callback=my_callback_method
그러면 서버는 다음과 같이 포장된 데이터에 응답해야 합니다.
my_callback_method({your json serialized data});
ajax-cross-backup 플러그인을 사용해야 합니다.http://www.ajax-cross-origin.com/
옵션 crossOrigin: true를 추가합니다.
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
JSON 데이터에 속성이 포함되어 있습니다.Data에 액세스 하고 있습니다.data대소문자를 구분합니다.
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://10.211.2.219:8080/SampleWebService/sample.do",
dataType: "json",
success: function (xml) {
alert(xml.Data[0].City);
result = xml.Code;
document.myform.result1.value = result;
},
});
}
EDIT Also City and Code가 잘못된 케이스입니다.(감사합니다 @Christopher Kenney).
EDIT2 또한 jsonp가 아닌 json이어야 합니다(적어도 이 경우).
업데이트 최신 코멘트에 따르면 Abdul Munim의 https://stackoverflow.com/a/11736771/325836을 읽으셔야 합니다.
해라
alert(xml.Data[0].City)
민감한 케이스!
jquery json parse를 사용하여 xml을 해석해야 합니다.
var parsed_json = $.parseJSON(xml);
alert(xml.data[0].city);
대신 xml.data["Data"][0].city를 사용합니다.
야후가 호스팅하는 공개 프록시 YQL을 사용합니다.XML 및 HTML 처리
https://gist.github.com/rickdog/d66a03d1e1e5959aa9b68869807791d5
언급URL : https://stackoverflow.com/questions/11736431/make-cross-domain-ajax-jsonp-request-with-jquery
'programing' 카테고리의 다른 글
| nvarchar(최대)와 NText (0) | 2023.04.08 |
|---|---|
| XHTML 자체 포함 태그를 제외한 열려 있는 태그와 RegEx 일치 (0) | 2023.04.08 |
| 기능 컴포넌트 기본 소품 vs 기본 파라미터 (0) | 2023.04.03 |
| Axios 라이브러리의 시간 초과 기능이 작동하지 않습니다. (0) | 2023.04.03 |
| WooCommerce 주문에서 쿠폰 데이터 가져오기 (0) | 2023.04.03 |