Код автоподгрузки записей без перезагрузки страницы Код автоподгрузки записей без перезагрузки страницы

Код автоподгрузки записей без перезагрузки страницы

Дата: Понедельник, 16.07.2012, 13:13 | Сообщение # 1

Группа: Администраторы

Сообщений: 1530

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Автоподгрузка HTML страницы</title>
<style type="text/css">
td {font-size:13px;color:#333;border:1px solid #ccc;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<center>

<div id="container"></div>

<div id="next" style="padding:30px;width:700px;" align="center">Next</div>

<script>
var xmlhttp;
var t=setInterval('load2();', 250);

var n = 0;
var s2=-5;
var dh=$(document).height();

//------------------------------------------

function put_lines(){

if (xmlhttp.readyState==4) {
document.getElementById("container").innerHTML += xmlhttp.responseText;
}
}

//------------------------------------------

function cli1(){

if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();

var url="hist.php?n="+n;

xmlhttp.open("GET",url,true);
xmlhttp.send();

n += 3;
xmlhttp.onreadystatechange=put_lines;
}

//------------------------------------------

$(document).click(function(){
cli1();
});

$("#next").mouseenter(function(){
cli1();
});

//------------------------------------------

function load2() {

if(n>27) {
clearInterval(t);
} else {
cli1();
}
}

</script>

</body>
</html>

--------------------------------------------------------------------
Рабочий пример: http://kachay.ucoz.org/load/scrolling_bez_kontsa/27-1-0-323

Дата: Понедельник, 16.07.2012, 13:23 | Сообщение # 2

Группа: Администраторы

Сообщений: 1530

Файл hist.php // взаимодействие с БД - выполнение запроса на подгруздку данных
---------------------------------------------------------------------------------------------------------

<?php

$n1=$_GET["n"];

$host="localhost";
$bd_user="user";
$pass="pass";
$bd_name="name";
$link = mysql_connect($host,$bd_user,$pass);
mysql_select_db($bd_name, $link) or die(mysql_error());

$tab4="tab";

$query = "SELECT * FROM `".$tab4."` where `9` >4 ORDER BY `".$tab4."`.`1` DESC LIMIT ".$n1." ,3";

$res = mysql_query($query, $link);
$fg=0;

while($row = mysql_fetch_array($res)) {

echo "<table width='100%' border='0'><tr><td width='10%'>".$row[0]."</td><td width='15%'>".$row[6]."</td>
<td width='15%'>".$row[2]."</td><td width='10%'>".$row[7]."</td><td align='right' width='20%'>".$row[3]."</td><td width='10%'>".$row[8]."</td>
<td><div style='font-size:11px;cursor:pointer;margin-left:10px;'
onclick=\"document.getElementById('spch".$row[0]."').style.display='block'\">Числа</div>
<span id='spch".$row[0]."' style='font-size:10px;display:none;width:300px;'
onClick=\"this.style.display='none';\">".$row[4]."</span></tr></table>";

$fg++;

}

mysql_close ($link);

?>

Дата: Вторник, 17.07.2012, 02:41 | Сообщение # 3

Группа: Администраторы

Сообщений: 1530

Альтернативный, более современный способ передачи AJAX запроса

function cli1() {

$.ajax({type: "GET", url: "hist.php", data: "n="+n, success: function(html) {
$("#container").append(html);
}
});
n += 3;
}

Дата: Вторник, 17.07.2012, 04:36 | Сообщение # 4

Группа: Администраторы

Сообщений: 1530

Альтернативный вызов события подгрузки данных
$(window).scroll(function() вместо $("#next").mouseenter
---------------------------------------------------------------------------------------------------

var bh=$('body').height();
var ss=0;
var ra=0;

$(window).scroll(function() {
var sss=$(window).scrollTop()-ss; //узнаем смещение вниз

if(sss<150 && sss>0) { //запрещаем подгружать данные дважды
ss=$(window).scrollTop();
ra= $('body').height() - $(window).scrollTop();
if(ra<500) $('body').css({height:$('body').height()+200});
}
});

Вариант 2

var bh=$('body').height();
var ss=0;
var ra=0;
var i=0;

$(window).scroll(function() {
var sss=$(window).scrollTop()-ss; //узнаем смещение вниз

if(sss<150 && sss>0) { //запрещаем подгружать данные дважды
ss=$(window).scrollTop();
i++; document.getElementById("more").innerHTML+="<p>"+i+"</p>";
// $("#more").css({top:(ss+30)}) ;
ra= $('body').height() - $(window).scrollTop();
if(ra<500) {

$('body').css({height:$('body').height()+5});
}
}
});

Код автоподгрузки записей без перезагрузки страницы - Архив