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 AJAX 设置dataType为jsonp，但您api.php输出的是 JSON，而不是JSONP。

要解决此问题，请将其更改dataType为json：

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

或者更改您的api.php文件以输出 JSONP 数据：

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