В jQuery есть три способа передачи данных без обновления страницы: $.ajax(), $.post(), $.get() и 1 способ получения данных: $.load()
Первый способ для передачи рассматриватся в данной статье не будет. Второй и третий похожи между собой и отличается только типом передачи данных.
Начнем из загрузки страницы.
Допустим нам нужно, чтобы при клике на ссылку данные загружались автоматически без перезагрузки. HTML код будет выглядеть таким образом:
<div class="links">
<a href="page1.php">Страница 1</a>
<a href="page3.php">Страница 2</a>
<a href="page2.php">Страница 3</a>
</div>
<div id="container"></div> // Сюда будет загружатся содержимоеТеперь собственно jQuery код:
$('div.links a').click(function (){
var href = $(this).attr('href');
$('#container').load(href);
return false;
});Теперь собственно разбор кода:
Первая строка думаю уже всем понятна. =)
var href = $(this).attr('href'); -- здесь целых 2 новые вещи. 1. $(this) -- обращается к текущему элементу; 2. attr('href') принимает значение аттрибута href выбранного элемента.
Если передать второй аргумент, то аттрибут будет изменён, например код $('a').attr('href', '/index.php') установит для всех ссылок значение аттрибута href как /index.php
$('#container').load(href); -- этот код загружает содержимое страницы приведенной по адресу href в <div id="container"></div>
return false; -- указывает, что переадресация отменяется
Думаю с этим всё понятно. =)
Отсылка данных
Допустим есть у нас блок статусов и нам нужно зделать, чтобы при нажатии на текст статуса появлалась форма изменения этого статуса, причем сохранение должно происходить без обновления страницы.
Вот это уже довольно таки сложный пример. Допустим, что скрипт сохраняющий статус--status.php
Итак, форма ввода статуса:
<div class="status_form"><div><form name="status" method="POST">
<label>Статус:<br/><input type="text" name="text" value="'[текущий статус]" placeholder="Что нового?" maxlength="100"/></label>
<div style="text-align:center;"><input type="button" onClick="status_save()" value="Сохранить"/>
<input type="button" value="Очистить" class="white" onClick="document.status.text.value=\'\';"/>
</div></form></div>
<div class="close"><a onclick="status_form();" title="Скрыть"></a></div>
</div>Также чтото должно открывать эту форму. В данном случае это будет ссылка с текстом текущего статуса
<a id="st">[Здесь текст текущего статуса]</a>Вот CSS для формы:
.status_form{
background-color: #eef6ff;
border: 3px solid #6890ba;
border-top: 0;
color: #2e6196;
display: none;
position: fixed;
left: 37%;
top: 0;
width: 26%;
}
.status_form div{
padding: 10px 20px 0 20px;
}
.status_form .close a{
background: url('images/hideup.png') no-repeat center #d9ebff;
color: #6d8fb5;
cursor: pointer;
display: block;
height: 9px;
margin: 0 -20px;
text-align: center;
text-decoration: none;
}
.status_form .close a:hover{background-color: #d0e6ff;}
.status_form div input[type=text]{width: 100%;}Ну и jQuery код:
var home = 'http://' + document.domain; //Адрес сайта
$('#st').click(function (){status_form();});
function status_form(){
$('div.status_form').slideToggle(300);
}
function status_save(){
var t = document.status.text.value;
$.post(home + '/status.php', {text: t}, status_form());
$('div.sidebar div.menu a.st').text(t);
}$('#st').click(function (){status_form();}); -- эта строка указывает, что при клику на любом элементе с id="st", появится/скроется форма ввода статуса
var t = document.status.text.value; -- принимает значение поля текста статуса
$.post(home + '/status.php', {text: t}, status_form()); -- разбираем по порядку. home + '/status.php'--адрес скрипта-получателя; {text: t} -- передаваемые параметры, в данном случае. чтобы скрипт получил текст статуса нужно использовать $_POST['text']; status_form() -- функция, выполняющаяся при завершении передачи.
$('div.sidebar div.menu a.st').text(t); -- данная строка изменяет текст ссылки, показывающей форму ввода статуса.
Пока на этом всё. Если у вас появится какая-нибуть идея и вы не будете знать как её реализовать, обращайтесь в эту тему
.gif)
