对新信息重新提出问题
我试图在搜索上显示一组有限的结果（即查询中的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 ...但是你们中的一些聪明的人可以看到我的方式错误并让我走上正确的道路... < / p>
我的基本设置：
结果页：
<?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中的限制，然后让它找到所有结果，然后在页面的show-results部分中执行'限制'，然后在我的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>*", "");
}
});
});
});
答案 0 :(得分：1)
好的，这不是最好的答案，只是上述评论的一个发展。我明天会试着写一个更好的答案。
但是，目前我的快速解决方法是：
doSearch，并将所有初始数字设置为0.
$(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进行了微小的更改。这不一定是最佳方式;我明天会修改并编辑它。
编辑：主要重构
doSearch是一个PHP函数，可将搜索结果打印到屏幕上。我会将其更改为一个返回结果数组的函数。我没有你的代码，我不知道它的外观，但它应该返回类似于：
阵列（
array（'name'=＆gt;'One'，'surname'=＆gt;'Smith'），
array（'name'=＆gt;'Two'，'surname'=＆gt;'Smythe'），
....
） moreresults.php是调用加载新结果的PHP。由于所有其余逻辑都将在Javascript中完成，因此现在只需要我们调用的PHP代码。我现在将在此文件中包含doSearch（）。
session_start（）;
require（“../ scripts / functions.php”）;
function doSearch（$ pdo，$ search，$ limit）{ / *在这里做逻辑* / return $ array_of_results; }
//设置变量 $ search = $ _POST ['search']; $ limit = $ _POST ['countNew'];
$ results = doSearch（$ pdo，$ search，$ limit）;
header（'Content-Type：application / json'）; //这将告诉客户端返回的内容类型。 echo json_encode（$ results）; //使用JSON在服务器端代码（PHP）和前端代码（Javascript）之间进行所有数据传输是个好主意。最好永远不要在PHP代码中输出任何内容，直到最后，您拥有所有必需的数据。它使以后更容易调试。
现在，HTML。它现在不需要任何PHP预处理，因为它总是会启动相同的。我们也不需要在这里跟踪变量，因为现在所有的逻辑都在Javascript部分。
.
.
.
<div id="showResultsAll">
.
.
.
<ul id="showResults">
</ul>
<button id="loadMore">Load more results</button>
</div>
.
.
.
$(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>
`);
}
});
注意：