2015-08-28 27 views
0

我正在實施一個不定式滾動網頁。它運作良好。它有如何獲取ajax請求到同一頁面?

1. index.php

2. getrecords.php兩頁。

index.php頁面

<html> 

//some html codes here 

//my java script 
<script type="text/javascript"> 
    var busy = false; 
    var limit = 6 
    var offset = 0; 
    var anotherID = 5 


    function displayRecords(lim, off) { 
    $.ajax({ 
     type: "GET", 
     async: false, 
     url: "getrecords.php", 
     data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID, 
     cache: false, 
     beforeSend: function() { 
     $("#loader_message").html("").hide(); 
     $('#loader_image').show(); 
     }, 
     success: function(html) { 
     $("#results").append(html); 
     $('#loader_image').hide(); 
     if (html == "") { 
      $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show() 
     } else { 
      $("#loader_message").html('<button class="btn btn-default btn-block" type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show(); 
     } 
     window.busy = false; 


     } 
    }); 
    } 

    $(document).ready(function() { 
    // start to load the first set of data 
    if (busy == false) { 
     busy = true; 
     // start to load the first set of data 
     displayRecords(limit, offset); 
    } 


    $(window).scroll(function() { 
     // make sure u give the container id of the data to be loaded in. 
     if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) { 
     busy = true; 
     offset = limit + offset; 

     // this is optional just to delay the loading of data 
     setTimeout(function() { displayRecords(limit, offset); }, 500); 

     // you can remove the above code and can use directly this function 
     // displayRecords(limit, offset); 

     } 
    }); 

    }); 

</script> 

</html> 

getrecords.php頁面

<?php 
require_once("config.php"); 


$limit = (intval($_GET['limit']) != 0) ? $_GET['limit'] : 10; 
$offset = (intval($_GET['offset']) != 0) ? $_GET['offset'] : 0; 
$id = $_GET["anotherID"]; 
$query = $id; 
$sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() LIMIT  $limit OFFSET $offset"; 

try { 
$stmt = $DB->prepare($sql); 
$stmt->execute(); 
$results = $stmt->fetchAll(); 
} catch (Exception $ex) { 
echo $ex->getMessage(); 
} 
if (count($results) > 0) { 
foreach ($results as $res) { 
echo 'something'; 
} 
} 
?> 

出於某種原因,我想兩個頁面合併成一個頁面。我想將getrecords.php的編碼放入index.php的內部並製作一個頁面。我嘗試了很多選擇,但沒有任何幫助。我怎樣才能做到這一點?提前致謝。

+1

是什麼你遇到的問題? –

+0

當我在我的java腳本中輸入index.php而不是getrecords.php時,獲取url路徑並將整個get records.php代碼放在我的index.php中,但它不能幫助我。它會再次回聲整個index.php並使其崩潰 – Subi

回答

0

嘗試包括getrecords.php內的index.php,寫一個條件,以檢查是否ajax請求,如果阿賈克斯然後執行登錄和退出,否則HTML部分

<?php 

    if(isset($_GET["anotherID"])){ 
    require_once("config.php"); 

    $limit = (intval($_GET['limit']) != 0) ? $_GET['limit'] : 10; 
    $offset = (intval($_GET['offset']) != 0) ? $_GET['offset'] : 0; 
    $id = $_GET["anotherID"]; 
    $query = $id; 
    $sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() LIMIT  $limit OFFSET $offset"; 

    try { 
    $stmt = $DB->prepare($sql); 
    $stmt->execute(); 
    $results = $stmt->fetchAll(); 
    } catch (Exception $ex) { 
    echo $ex->getMessage(); 
    } 
    if (count($results) > 0) { 
    foreach ($results as $res) { 
    echo 'something'; 
    } 
    } 
    exit; 
    } 
    ?> 

    <html> 

    //some html codes here 

    //my java script 
    <script type="text/javascript"> 
     var busy = false; 
     var limit = 6 
     var offset = 0; 
     var anotherID = 5 


     function displayRecords(lim, off) { 
     $.ajax({ 
      type: "GET", 
      async: false, 
      url: "getrecords.php", 
      data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID, 
      cache: false, 
      beforeSend: function() { 
      $("#loader_message").html("").hide(); 
      $('#loader_image').show(); 
      }, 
      success: function(html) { 
      $("#results").append(html); 
      $('#loader_image').hide(); 
      if (html == "") { 
       $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show() 
      } else { 
       $("#loader_message").html('<button class="btn btn-default btn-block" type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show(); 
      } 
      window.busy = false; 


      } 
     }); 
     } 

     $(document).ready(function() { 
     // start to load the first set of data 
     if (busy == false) { 
      busy = true; 
      // start to load the first set of data 
      displayRecords(limit, offset); 
     } 


     $(window).scroll(function() { 
      // make sure u give the container id of the data to be loaded in. 
      if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) { 
      busy = true; 
      offset = limit + offset; 

      // this is optional just to delay the loading of data 
      setTimeout(function() { displayRecords(limit, offset); }, 500); 

      // you can remove the above code and can use directly this function 
      // displayRecords(limit, offset); 

      } 
     }); 

     }); 

    </script> 

    </html> 
+0

tnk你很多錢..... – Subi

+0

它的100%工作frnd ...但唯一的錯誤是你仍然設置ajax url路徑到'getrecords。 php'當我更改'url:getrecords.php'到'url:index.php'它工作正常... tnk你sooo很frnd ... – Subi

0

當你把ajax放到同一頁面時 - 傳遞一些參數,例如"Getrecords" => TRUE。現在您的整個頁面將由兩頁合併而成,但如果您收到$_POST['Getrecords'] - 然後返回當前位於getrecords頁面的腳本的結果,否則在index.php中執行任何您需要的操作。不要忘了更改AJAX參數發佈和傳遞參數

+0

tnk u frnd ...我會盡力... – Subi

0

包裹代碼

if (isset($_GET['offset'])) { 
    // All the code from get records.php 
} else { 
    // All the code from index.php 
} 

在第一個頁面請求,_GET變量將不會被設置,所以在index.php代碼將運行,Ajax請求將在後續請求中提供。

+0

tnk u soo much frnd ... – Subi

+0

tnk u frnd ...它正在工作... – Subi

1

我的問題是:「你爲什麼要這樣做?」。分離顧慮是一件好事。例如,MVC就是基於此。這裏有兩個功能,一個是頁面或視圖,一個是服務器操作或控制器,或者可以是REST服務。讓他們分開是沒有錯的。

但我認爲你有一個很好的理由。

在你的情況,你想組合成一個「自我指涉」頁面2層的功能,要做到這一點,兩種方法是最常見的:通過您的AJAX調用

  1. 傳遞一個特殊的變量並使用if語句。
  2. 通過檢測內容類型,自動檢測頁面是在標準上下文還是AJAX上下文中調用。例如,如果內容類型爲json,則返回記錄,否則,呈現主視圖並執行AJAX調用。例如:$_SERVER["CONTENT_TYPE"] - 但請記住,這不是100%可靠的,您需要確保在您的AJAX請求中傳遞Content-type標頭。
+0

tnk你很多錢... – Subi