Php 滚动加载新内容
我正在为我的网站开发一个无限滚动(滚动加载数据)插件 这是Php 滚动加载新内容,php,jquery,ajax,Php,Jquery,Ajax,我正在为我的网站开发一个无限滚动(滚动加载数据)插件 这是load.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 thi
load.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 : 'No More Posts!', // 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 = 'Scroll for more or click here';
else $initmessage = 'Click for more';
// Append custom messages and extra UI
$this.append('<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('#container123').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('Lade...');
// 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
-脚本在我的index.php
文件中显示数据
这就是问题所在:
请查看上面的if(!empty($\u GET['search'])
-语句。显然,这个$\u GET
-变量无法填写,因为相应的表单(搜索表单)位于我的index.php
-页面中
现在我的问题是:如果(!empty($\u get['search'])正常工作,我如何才能让正常工作?我真的不擅长ajax,我相信问题是在load.js
中创建的数据首先会发布到ajax.php
这是index.php
<section id="start" class="...">
<div id="container123" class="...">
</div>
</section>
<!-- search form etc. -->
事先非常感谢。我知道这是相当多的代码。(顺便说一句,我知道MySQL已经过时了,而且很危险)修改你的插件,接受搜索词作为参数,并编写index.php之类的代码
<script>
$("#container123" ).scrollPagination ({ q:'<?php echo $_GET['search']; ?>'"}); </script>
<div id="container123"></div>
$(“#container123”)。滚动分页({q:''”});
现在,由于这段代码是在index.php中编写的,您将获得$\u get['search']
<script>
$("#container123" ).scrollPagination ({ q:'<?php echo $_GET['search']; ?>'"}); </script>
<div id="container123"></div>