2013-05-15 20 views
1

我正在開發一個無限滾動的移動網站來顯示其內容。無盡的滾動是通過this script(我的實現如下)來實現的。該腳本按其應有的方式工作。無盡的滾動和使用GET方法來過濾內容

但是其中一些內容分爲不同的類型。在沒有無限滾動的桌面版本上,類型使用GET方法進行過濾。但是,由於連接數據庫的實際php存儲在單獨的「ajax.php」中,因此GET中包含的篩選參數未傳遞給它,導致ajax.php不返​​回任何內容。有沒有辦法解決這個問題?在此先感謝

頁面顯示每個:

<!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> 
<script src="javascript.js"></script> 
<script> 
$(document).ready(function() { 
$('#content').scrollPagination({ 
nop  : 5, // The number of posts per scroll to be loaded 
offset : 0, // Initial offset, begins at 0 in this case 
error : ' ', // When the user reaches the end this is the message that is 
          // displayed. You can change this if you want. 
delay : 500, // When you scroll down the posts will load after a delayed amount of time. 
       // This is mainly for usability concerns. You can alter this as you see fit 
scroll : true // The main bit, if set to false posts will not load as the user scrolls. 
       // but will still load if the user clicks. 

}); 
}); 
</script> 
</head> 
<body> 
    <div id="content"> 
     <!-- infinite scroll content here --> 
    </div> 
</body> 
</html> 

javascript.js:

(function($) { 

$.fn.scrollPagination = function(options) { 

    var settings = { 
     nop  : 10, // The number of posts per scroll to be loaded 
     offset : 0, // Initial offset, begins at 0 in this case 
     error : ' ', // When the user reaches the end this is the message that is 
            // displayed. You can change this if you want. 
     delay : 500, // When you scroll down the posts will load after a delayed amount of time. 
         // This is mainly for usability concerns. You can alter this as you see fit 
     scroll : true // The main bit, if set to false posts will not load as the user scrolls. 
         // but will still load if the user clicks. 
    } 

    // Extend the options so they work with the plugin 
    if(options) { 
     $.extend(settings, options); 
    } 

    // For each so that we keep chainability. 
    return this.each(function() {  

     // Some variables 
     $this = $(this); 
     $settings = settings; 
     var offset = $settings.offset; 
     var busy = false; // Checks if the scroll action is happening 
          // so we don't run it multiple times 

     // Custom messages based on settings 
     if($settings.scroll == true) $initmessage = '顯示更多'; 
     else $initmessage = '顯示更多'; 

     // Append custom messages and extra UI 
     $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>'); 

     function getData() { 

      // Post data to ajax.php 
      $.post('ajax.php', { 

       action  : 'scrollpagination', 
       number  : $settings.nop, 
       offset  : offset, 

      }, function(data) { 

       // Change loading bar content (it may have been altered) 
       $this.find('.loading-bar').html($initmessage); 

       // If there is no data returned, there are no more posts to be shown. Show error 
       if(data == "") { 
        $this.find('.loading-bar').html($settings.error); 
       } 
       else { 

        // Offset increases 
        offset = offset+$settings.nop; 

        // Append the data to the content div 
        $this.find('.content').append(data); 

        // No longer busy! 
        busy = false; 
       } 

      }); 

     } 

     getData(); // Run function initially 

     // If scrolling is enabled 
     if($settings.scroll == true) { 
      // .. and the user is scrolling 
      $(window).scroll(function() { 

       // Check the user is at the bottom of the element 
       if($(window).scrollTop() + $(window).height() > $this.height() && !busy) { 

        // Now we are working, so busy is true 
        busy = true; 

        // Tell the user we're loading posts 
        $this.find('.loading-bar').html('載入中...'); 

        // Run the function to fetch the data inside a delay 
        // This is useful if you have content in a footer you 
        // want the user to see. 
        setTimeout(function() { 

         getData(); 

        }, $settings.delay); 

       } 
      }); 
     } 

     // Also content can be loaded by clicking the loading bar/ 
     $this.find('.loading-bar').click(function() { 

      if(busy == false) { 
       busy = true; 
       getData(); 
      } 

     }); 

    }); 
} 
})(jQuery); 

ajax.php:

<?php 
mysql_connect('host', 'username', 'password') or die(); 
mysql_select_db('database'); 

#START enable chinese encoding 
mysql_query("SET character_set_results=utf8"); 
#END enable chinese encoding 

$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die(); 
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die(); 

$category = mysql_real_escape_string($_GET['category']); 


$run = mysql_query("SELECT * FROM table WHERE category='$category' ORDER BY date DESC LIMIT ".$postnumbers." OFFSET ".$offset); 


    while($row = mysql_fetch_array($run)) { 

     echo ' 
      <a href="/video/video.php?id=' . $row['id'] . '&relatedgroup=' . $row['relatedgroup'] . '"> 
      <div id="contentitemwrap"> 
       <div id="videostripe">&nbsp;</div> 
       <div id="contentitemtitle"> 
        <h2>' . $row['name'] . ' <span class="relatedtype">(' . $row['relatedtype'] . ')</span></h2> 
        於' . $row['date'] . '發表 
        <p class="contenttext">' . $row['fbdescription'] . '</p> 
       </div> 
       <div id="widescreenimagewrap"> 
        <div id="widescreenimageratio"> 
        </div> 
        <div id="widescreenimage"> 
         <img id="img100" src="' . $row['thumbnail'] . '" /> 
        </div> 
       </div> 
      </div> 
      </a> 
     '; 

    } 
?> 
+0

如果點到正確理解,你是GET參數試圖傳遞提供給託管頁面(第一個代碼清單) – Orangepill

回答

1

假設你得到你想要傳遞到通過查詢字符串託管頁面的參數,那麼你應該能夠在getData更改$.post呼籲:

 $.post('ajax.php'+window.location.search, { 
      action  : 'scrollpagination', 
      number  : $settings.nop, 
      offset  : offset, 

     }, function(data) { 
      ..... the rest of your code 
+0

是的,做了這個工作,thx! –