2012-04-29 7 views
0

AJAX JSON을 가져 오기 위해 다음과 같은 코드를 주 페이지에 가지고 있습니다. 각 페이지 스크롤에 10 개의 추가 제품 만 표시하면됩니다. 현재로드하는 동안 제거해야하는 로더 Circle div 만 표시되지만로드되는 것은 없습니다. 이 HTML에 데이터를로드 나던 그래서 전체Ajax JSON 반환하지 않음

[{"p_id":"1","p_name":"ASOS Pleated Swing Mac"},{"p_id":"2","p_name":"ASOS Midi Belted Coat"},{"p_id":"3","p_name":"ASOS Zig Zag Coat"},{"p_id":"4","p_name":"Collarless Quilted Leather Biker with Ribbed Sleeve"},{"p_id":"6","p_name":"TFNC Dress with Wrap Front in Flocked Heart"},{"p_id":"7","p_name":"Striped Skater Dress"}, 
{"p_id":"8","p_name":"Metallic Wrap Dress"},{"p_id":"9","p_name":"Strapless Dress With Neon Belt"},{"p_id":"10","p_name":"Darling Floral Border Print Dress"},{"p_id":"11","p_name":"Dip Hem Chiffon Dress With Printed Top"}] 

: PHP는 표시가 같다

 var handler = null; 
    var page = 1; 
    var isLoading = false; 
    var apiURL = 'ajax/api.php'  

    function onScroll(event) { 
     // Only check when we're not still waiting for data. 
     if(!isLoading) { 
     // Check if we're within 100 pixels of the bottom edge of the broser window. 
     var closeToBottom = ($(window).scrollTop() + $(window).height() > 
    $(document).height() - 100); 
     if(closeToBottom) { 
      loadData(); 
     } 
     } 
    }; 

    function loadData() { 
     isLoading = true; 
     $('#loaderCircle').show(); 

     $.ajax({ 
     url: apiURL, 
     dataType: 'jsonp', 
     data: {page: page}, // Page parameter to make sure we load new data 
     success: onLoadData 
     }); 
    }; 

    // Receives data from the API, creates HTML for images 
    function onLoadData(data) { 
     isLoading = false; 
     $('#loaderCircle').hide(); 

     // Increment page index for future calls. 
     page++; 

     // Create HTML for the images. 
     var html = ''; 
     var i=0, length=data.length, image; 
     for(; i<length; i++) { 
     image = data[i]; 
     html += '<li>'; 

     // Image tag 
     html += '<img src="products/200/'+p_id+'.jpg" ">'; 

     // Image title. 
     html += '<p>'+p_name+'</p>'; 

     html += '</li>'; 
     } 

     // Add image HTML to the page. 
     $('#tiles').append(html); 

    }; 

그리고 내 PHP의 JSON 호출

<?php require_once('../inc/config.php'); 
    $page = $_REQUEST['page']; 
    $items = '10'; 
    $start = (($page * $items) - $items); 
    $end = ($page * $items); 

    $result = mysql_query("SELECT p_id, p_name FROM products ORDER BY p_id ASC LIMIT $start, $end"); 


    $products = array(); 
    while($product = mysql_fetch_array($result, MYSQL_ASSOC)) { 
    $products[] = ($product); 
    } 

    $output = json_encode($products); 

    echo $output; 
    ?> 

json으로 (예 : 데이터) 다음 . 누군가 내가 할 수있는 일이나 잘못하고있는 일에 대해 설명해 줄 수 있습니까? (이것은 wookmark 플러그인을 사용 -하지만 아무것도에 영향을 미칠 야해)

+0

시도 오류 아약스 함수() 핸들러를 추가 :

는이 문제를 해결, 어느 dataTypejson을 변경하려면 :

$.ajax({ url: apiURL, dataType: 'json', data: {page: page}, // Page parameter to make sure we load new data success: onLoadData }); 

또는 출력 JSONP 데이터에 api.php 파일을 변경 해고되는지, 그리고 어떤 오류가 발생하는지 확인하십시오. 반환 된 데이터가 jsonp가 아닌 jsonp인지 확인하십시오. – adeneo

+0

오류는 200을 제공하고 오류 : jQuery1720435445470206538_1335662563183이 호출되지 않았습니다. 그것은 다른 매개 변수를 전송하기 때문에 어떤 추측입니까? – Anthony1234

+0

또한 JSONP가 true인지 어떻게 확인할 수 있습니까? – Anthony1234

답변

0

문제하면 jsonp에 jQuery를 AJAX dataType을 설정 한 것입니다,하지만 api.php은 JSON, 하지 JSONP를 출력한다. ,

$json = json_encode($products); 
$output = isset($_GET['callback']) ? "{$_GET['callback']}($json)" : $json; 
+0

고마워요. 첫 번째 옵션이 제대로 작동했지만 뽑은 데이터가 어떤 이유로 인해 예상대로 잘 작성되지 않았습니다. 아마 내 문제. 그리고 나는 두 번째 옵션을 시도했지만 핸들러에서 에러를 발생시켰다. – Anthony1234

+0

@ anthony1234 당신이 듣고있어 기쁘다. 제발 [대답을 수락하십시오] (http://meta.stackexchange.com/a/5235/182969). – Xenon

+0

json과 jsonp의 전반적인 차이점은 무엇입니까? 그게 내 레이아웃에 영향을 줄까요? – Anthony1234

관련 문제