Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Подгрузка без перезагрузки

  • Среда, 9 марта 2012, 20:36 |
  • Автор: karpovi4 |
  • Просмотров: 4584 |
  • Комментарии: 5 |
  • В закладки:
Twitter, Facebook, Вконтакте и Google используют очень интересную технологию для подгрузки новых твитов, обновлений и результатов поиска. Суть заключается в том, что когда вы кликаете на кнопку "еще" новые обновления загружаются ниже предыдущих при этом не перезагружая страницу.
Сэкономить свое время, при этом ни чем не рискуя совершить выгодную сделку. Как это сделать? Достаточно просто - участие в электронных торгах не потребует личного присутствия и при этом вы совершаете сделку, на выгодных для вас условиях, ничем не рискуя.
Для начала создаем таблицу messages с полями msg_id и message. Заполняем ее.

Код javascript
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID){
$("#more"+ID).html('5 сег..');
$.ajax({
type: "POST",
url: "more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
    $(".morebox").html('конец');
}
return false;
});
});
</script>



Создаем файл load_more.php
Содержит простой php код. Выводит результаты из таблицы сообщений
<div id='container'>
<ol class="timeline" id="updates">
<?php
include('config.php');
$sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>
</div>


Делаем файл more.php
Возвращает записи из таблицы сообщений, где msg_id младше последнего подгруженного id'шника.
<?php
include("config.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
while($row=mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>

Если кто что недогнал - вопросы в комменты.
Лайв демо на karpovi4.ru и советую прочитать статью "Сворачивание div-ов на Jquery"
Удачки.
Добавить комментарий