jQuery перезагрузка div без перезагрузки страницы перезагрузка изображения

Иногда необходимо перезагрузить часть HTML страницы. Например, обновить изображение-код антиспама, на странице с формой добавления текста. Обновить DIV блок без обновления всей странице можно с помощью Ява-библиотеки -  jQuery.

Первое, что нам нужно будет сделать, это, естественно, подключить сам jQuery.

Библиотека jQuery может находится у Вас на сайте, либо браться непосредственно с сайта проекта jQuery.

jQuery лучше подключать в верхнем блоке между тегами <HEAD> </HEAD>, до тега <BODY>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-language" content="ru">
<title>Перезагрузка DIV по клику</title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

Теперь пишем часть скрипта отвечающего за перезагрузку DIV (этот код, также, рекомендуется размещать в «шапке» до закрывающего тега </HEAD>):

<script>
$(function(){
$("a#newCaptcha").click(function(){
$("div#captcha").html("<img src='captcha.php?anti_cache="+Math.random()+"' border='' />");
return false;
});
});
</script>

Этот код объясняется так:
при клике на ссылку с ID newCaptcha в контейнере DIV с ID captcha перезагружается изображение, которое генерируется скриптом captcha.php:

</head>
<body>
<div id="captcha">
<img src="captcha.php" border="0" />
</div>
<br />
<a id="newCaptcha" href="#">Не можете разобрать? Обновить код антиспама!</a>
</body>
</html>

Теперь, при нажатие на ссылку, у нас обновляется код-картинка антиспама.

Опубликовано 11.06.2013 в 20:52 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, Javascript, jQuery · Теги: , , , , ,