JQM json 요청이 모바일에서 구문 분석되지 않습니다.

json을 사용하여 데이터베이스 데이터를 검색하는 모바일 앱을 개발하고 있습니다. 내 Mac 브라우저를 사용하여 요청 된 데이터와 알림을 가져와 새 모바일 페이지에 표시 할 수 있습니다. 나는 ipad 또는 iPhone의 사파리에서 작동하도록 할 수 없습니다. 페이지가로드되지만 데이터가 없습니다.JQM json 요청이 모바일에서 구문 분석되지 않습니다.

힌트를 보내 주시면 감사하겠습니다.

HTML 코드

<!DOCTYPE HTML> 
<html> 
<head> 
<title>tourmap_main.jpg</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script src="js/treedetails14.js"></script><div data-role="page" id="firstpage" data-theme="a"> 
<div data-role="header" data-position="fixed"> 
     <h1>Winter Hill Garden Tour</h1> 

</div> 
<div data-role="content" id="mainpage" data-theme="a"> 
    <div id="area1Button"><a href="#area1" data-role="button" data- transition="flip">AREA 1</a> 
    </div> 
</div> 
<div data-role="footer" data-theme="a" data-position="fixed"></div> 
</div> 
<div data-role="page" id="area1" data-add-back-btn="true" data-theme="a"> 
<div data-role="header" data-position="fixed"> 
     <h1>Garden Tour - Area 1</h1> 

</div> 
<div id="area1content" data-role="content"> 
    <div id="tree105" class="treebutton"><a href="#detailsPage" data-rel="page" data-role="button" data-transition="slide" data-id="27" class="treelink">Button 1</a> 
    </div> 
    <div id="tree106" class="treebutton"><a href="#detailsPage" data-rel="page" data-role="button" data-transition="slide" data-id="32" class="treelink">Button 2</a> 
    </div> 
</div> 
</div> 
<div data-role="page" id="detailsPage" data-overlay-theme="a"> 
<div data-role="header" data-add-back-btn="true"> 
    <h1 align="left"><span>Tree information -</span> <span id="treetitle"></span></h1> 
</div> 
<div id="treeDetails" data-role="content"> 
    <div id="treedescription"></div> 
</div> 
<div data-role="footer" data-theme="a" data-position="fixed"></div> 
</div>

그리고 내 스크립트를

$(document).on('pagebeforeshow', '#firstpage', function(){ 
$('.treelink').live('click', function(){ 
    var serviceURL = "http://winterhill.com.au/gardentour/services/"; 
    currentId = $(this).attr('data-id'); 
    $.getJSON(serviceURL + 'gettree.php?id='+currentId, function(data) { 
     var tree = data.item; 
     alert(tree.tree_description); 
     $('#detailsPage').append("<p>item1="+tree.tree_description +"</p>"); 
    }); 
}); 
});

여기에 기본 코드 설정이다 : http://jsfiddle.net/VgxnQ/1/

출처

2013-07-23 Mitchell Ward

구문 분석 할 수없는 것은 아닙니다. 요청할 수 없다는 것입니다. Ajax 요청은 [같은 출처 정책] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)에 의해 제한되며 서비스는 CORS 예외를 제공하지 않습니다 (적어도 jsFiddles). 서비스가 JSONP를 지원하면 교차 원점을 사용할 수 있습니다. JSONP를 사용하여 jQuery [docs] (http://api.jquery.com/jQuery.getJSON/#jsonp)에서 읽을 수 있습니다. –

Try this code: 

$('#area1').on('pagebeforeshow', function() { 
    $('.treelink').on('click', function() { 

     currentId = $(this).attr("data-id"); 

     window.sessionStorage.setItem("IdKey", currentId); 

     $.mobile.changePage("#detailsPage", 
          { reverse: false, 
           changeHash: false 
          });  

    }); 
}); 

$('#detailsPage').on('pagebeforeshow', function() { 

    currentId = window.sessionStorage.getItem("IdKey"); 

    var serviceURL = "http://winterhill.com.au/gardentour/services/"; 

    $.getJSON(serviceURL + 'gettree.php?id=' + currentId, function (data) { 
      var tree = data.item;  
      $('#treedescription').text(tree.tree_description); 
     }); 

});

는 여전히 액세스 할 필요가 원산지 문제를 할 수있다 서버 수준에서 해결되었거나 JSONP가 활성화되거나 활성화 됨 웹 서비스에 액세스하는 모든 도메인을 허용하도록 설정합니다.

출처

2013-07-23 04:24:51 Sheetal

답변 해 주셔서 감사합니다. 코드 스 니펫은 작동하지만, jsFiddle이나 iPad는 아닙니다. 내 앱과 관련하여 동일한 출처 정책을 완전히 이해하고 있는지 확신 할 수 없습니다. 내 PHP 파일은 다른 모든 것과 같은 도메인에 있습니다 - 왜 내 맥 브라우저지만 ipad (동일한 인터넷 연결을 사용)에서 작동합니까? jsonp를 사용하여 PHP 파일에서 쿼리 결과에 액세스하는 더 좋은 방법이 필요하다고 가정합니다. –

예 jsonp를 시도해보십시오.하지만 Mac Wi-Fi를 사용하는 경우 ipad를 통해 액세스 할 수 있어야합니다. – Sheetal

JQM json 요청이 모바일에서 구문 분석되지 않습니다.

답변

관련 문제