0

メインページに次のコードがあり、AJAX JSON をプルしようとしています。各ページのスクロールで 10 個の余分な製品を表示するだけです。現時点では、ロード後に削除する必要があるローダー Circle div のみが表示されますが、何もロードされていません。

     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;
    ?>

PHP が表示する 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"}]

全体として、データをhtmlにロードしません。誰かが私がしなければならないこと、または私が間違っていることを説明してもらえますか. (これは wookmark プラグインを使用していますが、何の影響もありません)

4

1 に答える 1

0

問題は、jQuery AJAXdataTypeをに設定したjsonpが、JSONP ではなくapi.phpJSON を出力していることです。

これを解決するには、を次のように変更dataTypeしjsonます。

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

または、api.phpJSONP データを出力するようにファイルを変更します。

$json = json_encode($products);
$output = isset($_GET['callback']) ? "{$_GET['callback']}($json)" : $json;
于 2012-04-29T01:35:58.470 に答える