Обновление капчи без перезагрузки страницы

Обновление капчи без перезагрузки страницы

3560
17.08.2015

Пример решения показа капчи с возможностью перезагрузки картинки по ajax-технологии

Показ капчи вместе с перезагрузкой картинки начинается с первоначального вывода:

	 <? $code = $APPLICATION->CaptchaGetCode(); ?>
	 <img id="CaptchaImage" src="/bitrix/tools/captcha.php?captcha_sid=" alt="CAPTCHA">
	 <input name="captcha_sid" value="" type="hidden">
	 <span id="CallreloadCaptcha"></span>
	 <input class="inputtext form-control req" value="" maxlength="50" size="30" name="captcha_word" type="text">

Первая строка получает сгенерированный системой код. Дальше - изображение, которое показывает данный код, поле, в которое вписывается id кода, иконка для запуска механизма смены картинки и поле для ввода пользователем значения. Все просто.

Стили - по вашему усмотрению, чтобы все красиво вписывалось в дизайн.

Дальше - пишем обработчик на смену изображения по клику на иконку перезагрузки: 

	 $('#reloadCaptcha').click(function(){
	 $.getJSON(ajaxUri,{'action':'reloadAjax'}, function(data) {
	 $('#CaptchaImage').css('opacity','0.1');
	 $('#CaptchaImage').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
	 $('#captcha_sid').val(data);
	 $('#CaptchaImage').css('opacity','1');
	 });
	 return false;
	 });

ну и наконец, в файле, который будет принимать запрос к серверу, который прописываем в переменной ajaxUri, пишем:

	<?php require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php'); 
	echo json_encode($APPLICATION->CaptchaGetCode()); ?>



Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

Добавить комментарий

captcha

Возврат к списку