使用php和ajax將查詢限制增加給定數量

Question

重新提出對新信息的疑問
我試圖在搜索中顯示一組有限的結果（即查詢中的LIMIT 10），然后有一個按鈕將加載下一個10（現在在同一查詢中為LIMIT 20）。

問題是，當我按下按鈕時，它不僅刷新指定的div-而且重新運行頁面頂部的doSearch-從而將LIMIT重置為10 ...

所以如果我
1.加載結果頁
2.注釋掉頁面頂部的doSearch
然后首先
3.點擊按鈕

它按規定運行...現在顯示20個結果...如果再次單擊，它將顯示30個...等等。

如果我取消注釋頁面頂部的doSearch並單擊按鈕，它現在再次顯示10條結果...

Ajax代碼中有問題的代碼是

var showResult = self.closest('#showResultsAll').find('[id^="showResults"]');
showResult.load(location.href + " #showResults>*", "");

我看不到為什么我的代碼會在頁面頂部重新運行doSearch ...但是希望你們中的一些明智的人可以看到我的方式的錯誤，並讓我走上正確的道路...

我的基本設置：
結果頁面：

<?php // get search results limit 10 ?>
.
.
.
<div id="showResultsAll">
    .
    .
    .
    <div id="showResults">
        // Loop through and show results
        <div id="moreResultsButton">
            <input type="hidden" name="search" id="search" value="<?php // search terms ?>">
            <button id="moreResults" value="<?php // number of results found ?>">

的jquery.js

$(document).ready(function(){
    "use strict";
    $(document).on('click','button[id^="moreResults"]', function(){
        var self = $(this);
        var closestDiv = self.closest('#moreResultsButton');
        var search = closestDiv.find('[id^="search"]').val();
        var count = self.val();
        var countNew = + count + 10;
        $.ajax({
            type: "POST",
            url:'../scripts/moreresults.php',
            data:"countNew="+countNew+"&search="+search,
            success:function(){
                var showResult = self.closest('#showResultsAll').find('[id^="showResults"]');
                showResult.load(location.href + " #showResults>*", "");
            }
        });
    });
});

moreresults.php

session_start ();

require ( "../scripts/functions.php" );

// Set variable
$search = $_POST['search'];
$limit = $_POST['countNew'];

doSearch ( $pdo , $search , $limit ); // same function that found the search results in the first place

更新
因此，根據以下@delCano給出的答案松散地找到了一個解決方案（盡管我仍然對為什么我的原始代碼堅持要重新運行頁面頂部的doSearch感到好奇）

解：
我首先通過在doSearch中刪除限制來拆分所有內容，然后讓它查找所有結果，然后在頁面的顯示結果部分進行“限制”，然后在jQuery中添加10

新代碼：
結果頁面

<?php // doSearch no limit ?>
.
.
.
<div id="showResultsAll">
    .
    .
    .
    <div id="showResults">
        // Loop through and show results - limiting like this
        // if isset $_POST['show'] (ie. button clicked)
            // if $_POST['show'] less than $_SESSION['totalResults'] (ie. more results coming)
                // $show = $_POST['show'] (ie. 20, 30, etc.)
            // else
                // $show = $_SESSION['totalResults'] (ie. 11, 12, ..., 21, 22, ..., 31, 32, ..., etc.)
        // else (if button not clicked limit results to max. 10) 
            // if $_SESSION['totalResults'] more than 10
                // $show = 10 
            // else
                // $show = $_SESSION['totalResults'] (ie. 1, 2, 3, etc.)
        // loop trough $show number of results

        <div class="<?php if $show == $_SESSION['totalResults'] echo "disabled" // Only active if more results are available ?>" id="moreResultsButton">
            <button id="moreResults" value="<?php echo $show; ?>">

的jquery.js

$(document).ready(function(){
    "use strict";
    $(document).on('click','button[id^="moreResults"]', function(){
        var self = $(this);
        var show = self.val();
        var showNew = + show + 10;
        $.ajax({
            type: "POST",
            url:'',
            data:"show="+showNew,
            success:function(){
                self.closest('#showResultsAll').find('[id^="showResults"]').load(location.href + " #showResults>*", "");
            }
        });
    });
});

Answer 1

好的，這不是最佳答案，只是上述注釋的發展。 明天我會嘗試寫一個更好的答案。

但是，目前，我的快速解決方法是：

1. 正如您提到的，從頁面頂部刪除doSearch ，並將所有初始數字設置為0。
2. 用以下代碼替換您的jQuery：

 $(document).ready(function(){ "use strict"; $('button#moreResults').click(addResults); function addResults(){ var self = $(this); var closestDiv = self.closest('#moreResultsButton'); var search = closestDiv.find('[id^="search"]').val(); var count = self.val(); var countNew = + count + 10; $.ajax({ type: "POST", url:'../scripts/moreresults.php', data:"countNew="+countNew+"&search="+search, success:function(){ var showResult = self.closest('#showResultsAll').find('[id^="showResults"]'); showResult.load(location.href + " #showResults>*", ""); } }); } // load the first ten results addResults(); }); 

請注意，我對您的Javascript所做的更改很少。 這不一定是最理想的方式。 我明天將對其進行修改和編輯。

---

編輯：主要重構

1. doSearch是一個PHP函數，可將搜索結果打印到屏幕上。 我將其更改為一個返回結果數組的函數。 我沒有您的代碼，也不知道它的外觀，但是它應該返回類似於以下內容的內容：array（array（'name'=>'One'，'surname'=>'Smith'） ，array（'name'=>'Two'，'surname'=>'Smythe'），....）

2. moreresults.php是用來加載新結果的PHP。 由於所有其他邏輯都將使用Javascript完成，因此目前這是我們稱為的唯一PHP代碼。 我現在將doSearch（）包含在此文件中。

   session_start（）;

   要求（“ ../scripts/functions.php”）;

   函數doSearch（$ pdo，$ search，$ limit）{/ *在這里做邏輯* /返回$ array_of_results; }

   //設置變量$ search = $ _POST ['search']; $ limit = $ _POST ['countNew'];

   $ results = doSearch（$ pdo，$ search，$ limit）;

   header（'Content-Type：application / json'）; //這將告訴客戶端返回的內容類型。 回聲json_encode（$ results）; //在JSON中的服務器端代碼（PHP）和前端代碼（Javascript）之間進行所有數據傳輸是一個好主意。 最好不要在您的PHP代碼中輸出任何內容，直到最后擁有所有必需的數據。 它使以后調試變得更容易。

3. 現在，HTML。 現在，它不需要任何PHP預處理，因為它將始終以相同的方式啟動。 我們這里也不需要跟蹤變量，因為所有邏輯現在都在Javascript部分中。

 . . . <div id="showResultsAll"> . . . <ul id="showResults"> </ul> <button id="loadMore">Load more results</button> </div> . . . 

4. 現在，JavaScript承擔了大多數邏輯的重擔。

 $(function() { // Shorthand for "$(document).ready(function()..." var count = 0; $("#loadMore").click(loadMoreResults); function loadMoreResults() { var url = "../scripts/moreresults.php"; var search = $("#search").val(); count += 10; var data = { 'countNew': count, 'search': search }; $.post(url, data, showResults, 'json' ); } function showResults(data) { $("#showResults").empty().append(` <li>${data.name} ${data.surname}</li> `); } }); 

筆記：

• 由於我不知道您使用的是哪種數據，因此以名稱和姓氏列表為例。
• 同樣，我將結果顯示為無序列表（）和列表項（
• ）; 您可能更喜歡一張桌子或其他物品。
• 該代碼是完全未經測試的。 我試圖保持謹慎，但我可能犯了一些錯別字或其他錯誤。
• 如果您是我，我會嘗試先學習一些jQuery基礎知識，然后再開始使用Ajax。 FreeCodeCamp有一個不錯的jQuery課程。
• 代碼體系結構非常重要，並且在在線課程中通常沒有得到很好的解釋。 作為總結：
  1. 始終提前計划您的代碼。 拿起筆和紙，或您最喜歡的文本編輯器，回答以下問題：“代碼必須做什么？”。 然后以較小的步驟分解答案。 然后將每個步驟分成較小的步驟，依此類推。
  2. 只要有一段代碼，您可能都需要兩次，將其包裝到一個函數中。 將功能視為小的“任務”
  3. 盡可能將邏輯與演示分開。 您應該將代碼的一部分用於數據本身，而部分代碼用於顯示數據，並且它們幾乎應該彼此獨立。 您可能想看一下MVC模式（模型-視圖-控制器）。 它可能正在更換中，但這是一個很好的起點。 順便說一句，這在后端（doSearch將是邏輯，更多結果是表示）和前端（html是表示，javascript是邏輯）上都是有效的。
• 最后，我給您的代碼並不完美，但是我認為這是一個更好的開始。 您肯定會找到許多改進方法