我正在实施一个不定式滚动网页。它运作良好。它有两页
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
内并制作一个页面。我尝试了很多选择,但没有任何帮助。我怎样才能做到这一点?提前谢谢。
答案 0 :(得分:1)
我的问题是:“你为什么要那样做?”分离关注是一件好事。例如,MVC就是以此为基础的。这里有2个功能,一个是页面或视图,一个是服务器操作或控制器,或者可以是REST服务。将它们分开是没有错的。
但我认为你有充分的理由。
在您的情况下,您尝试将一个“自引用”页面与两个功能组合在一起,为此,有两种方法最常见:
json
,则返回记录,否则,呈现主视图并执行AJAX调用。示例:$_SERVER["CONTENT_TYPE"]
- 但请记住,这不是100%可靠,您需要确保在AJAX请求中传递Content-type标头。答案 1 :(得分:0)
当你ajax到同一页面时 - 传递一些参数,例如ids
。现在你的整个页面将由2个页面组成,但如果你收到3
- 然后返回当前位于getrecords页面上的脚本结果,否则在index.php中做你需要的任何事情。别忘了将ajax参数更改为POST并传递参数
答案 2 :(得分:0)
用
包裹代码if (isset($_GET['offset'])) {
// All the code from get records.php
} else {
// All the code from index.php
}
在第一页请求中,_GET变量不会被设置,因此index.php代码将运行,Ajax请求将在后续请求中提供。
答案 3 :(得分:0)
尝试将getrecords.php包含在index.php中并写入条件以检查ajax是否请求,如果其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>