16 +
Ноябрь 2018
1Чт2Пт3Сб4Вс5Пн6Вт7Ср8Чт9Пт10Сб11Вс12Пн13Вт14Ср15Чт16Пт17Сб18Вс19Пн20Вт21Ср22Чт23Пт24Сб25Вс26Пн27Вт28Ср29Чт30Пт

Скачать Простая регистрация на сайте при помощи Ajax бесплатно.

У нас вы можете ознакомиться с Простая регистрация на сайте при помощи Ajax

Данный материал предоставлен сайтом исключительно в ознакомительных целях. Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Простая регистрация на сайте при помощи Ajax

Автор:  | Дата:  | Просмотров: 3,6К 



+1


Простая регистрация на сайте при помощи Ajax

Итак, в этом уроке я расскажу вам, как сделать регистрацию на сайте при помощи ajax. Популярные сайты содержат много интересных дизайнерских ходов и решений.

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

Для этого вебмастера используют максимально возможные средства для создания удобного юзабилити, шикарного дизайна, и использую новые технологии. В том числе и технологию Ajax. На сегодняшний день эта технология очень популярна, так как с помощью нее можно обрабатывать запросы в фоне, тем самым избегая перезагрузки страницы.

В сегодняшнем уроке я расскажу вам, как можно использовать эту технологию для создания простой регистрации на сайте.

Начнем с создания формы для регистрации.
<script type="text/javascript" src="regis.js"></script>
<div style="width:545px;">

Логин:<br /><input type="text" id="login" size="30"/><br />

Имя:<br /><input type="text" id="imya" size="30"/><br />

Фамилия:<br /><input type="text" id="familiya" size="30"/><br />

E-mail:<br /><input type="text" id="email" size="30"/><br />

Дата рождения:<br>

<select id="god"><option>Год</option>
<?php for($i = 1900; $i <= 2000; $i++) { echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select>

<select id="mesyac"><option>Месяц</option>
<?php for($i = 1; $i <= 12; $i++) { echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select>

<select id="chislo"><option>Число</option>
<?php for($i = 1; $i <= 31; $i++) { echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select><br />

Ваш пол:<br />
<select id="pol">
<option>Пол:</option>
<option value="Мужской">Мужской</option>
<option value="Женский">Женский</option>
</select><br />

Пароль:<br /><input type="password" id="password" size="30"/><br />

<input type="button" value="Регистрация" id="button" onclick="add_users();"/>

<!-- Картинка загрузки -->
<div id="load1" style="display:none;"><img src="image/load.gif" /></div>

<!-- Где будет показана картинка загрузки -->
<div id="answer" style="width:100px; position:absolute; height:20px; margin-top:-30px; margin-left:160px;"></div>

<!-- В этом блоке будет показан ответ от регистрации -->
<div id="answer2"></div>

</div>

Мы не будем заниматься дизайном регистрационной формы, наша цель в другом. А именно в создании Ajax регистрации, поэтому украшательством, думаю, каждый займется сам. Пока нечего необычного нет, все стандартно. Единственное добавляем несколько полей, в которые мы будем получать ответ от нашего скрипта.

Так как нашему обработчику нужно будет, куда-то сохранять данные, необходимо создать простую табличку в базе состоящею из 11 полей. В исходники я помещу SQL запрос, который поможет вам создать эту табличку.

Далее создадим, обработчик для нашей формы, который будет проверять все введение данные, и отправлять данные в базу. Так файл емкий на содержимое, я покажу вам только часть файла, остальное вы сможете найти в исходниках к этому уроку. Комментарии прилагаются.
header('Content-Type: text/html;charset=windows-1251');  //кодировка

$db = mysql_connect("localhost","alex","12345"); // хост, пользователь, пароль
mysql_select_db("regisl",$db); // название базы

// получаем переменные через post
$login = iconv("UTF-8", "Windows-1251", $_POST['login']);
$imya = iconv("UTF-8", "Windows-1251", $_POST['imya']);
$familiya = iconv("UTF-8", "Windows-1251", $_POST['familiya']);
$email = iconv("UTF-8", "Windows-1251", $_POST['email']);
$god = iconv("UTF-8", "Windows-1251", $_POST['god']);
$mesyac = iconv("UTF-8", "Windows-1251", $_POST['mesyac']);
$chislo = iconv("UTF-8", "Windows-1251", $_POST['chislo']);
$pol = iconv("UTF-8", "Windows-1251", $_POST['pol']);
$password = iconv("UTF-8", "Windows-1251", $_POST['password']);

$regexp = '/^[a-z_0-9\-\.]+@[a-z_0-9\-\.]+\.[a-z]{2,6}$/i'; // используем регулярки для проверки email

if (!preg_match($regexp, $email2)) {
echo '<div id="bug"><img src="image/error.png" align="left">Пожалуйста введите свой E-mail
<div style="clear:left;"></div></div><br/>';
}
.......

Отлично почти все готово, осталось только создать наш скрипт, который будет в фоне перехватывать события кнопки регистрация. И отправлять файлы в наш обработчик через Ajax. Вот он этот скрипт.
function add_users() {
//Получаем то что ввел пользователь
var login = document.getElementById('login').value;
var imya = document.getElementById('imya').value;
var familiya = document.getElementById('familiya').value;
var email = document.getElementById('email').value;
var god = document.getElementById('god').value;
var mesyac = document.getElementById('mesyac').value;
var chislo = document.getElementById('chislo').value;
var pol = document.getElementById('pol').value;
var password = document.getElementById('password').value;

var load1 = document.getElementById('load1');
var answer = document.getElementById('answer');
var answer2 = document.getElementById('answer2');

//То что будем отправлять на сервер
var parameter = 'login='+login+'&imya='+imya+'&familiya='+familiya+'&email='+email+'&god='+god+'&mesyac='+mesyac+'&chislo='+chislo+'&pol='+pol+'&password='+password;
//Показываем загрузку
answer.innerHTML = load1.innerHTML;
//Соединяемся с аяксом
var network = createRequestObject();
//Тут мы выбираем метод отправки формы и куда отправляем
network.open("POST","regis_users.php",true);
//Кодировка формы у меня она windows-1251
network.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=windows-1251");
//Здесь пишем ответ от сервера то что отправить нам сервер в ответ
network.onreadystatechange = function () {
if(network.readyState == 4) {answer.innerHTML = ''; answer2.innerHTML = network.responseText; }
}
//Отправляем запрос
network.send(parameter);
}
//Подключаемся к аяксу
function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}

Ну, вот и все, наша простая регистрация использующая Ajax запросы завершена. Надеюсь, что с помощью этого урока вы смогли создать для своего ресурса, простую и удобную регистрацию.

Вес:
11,98 Kb
Загрузок:
14



Скачать торрент


Готовим для Вас Бонус, пожалуйста подождите!





Поиск торрент раздач, пожалуйста подождите!

У нас вы можете скачать бесплатно Простая регистрация на сайте при помощи Ajax torrent, Скачать Простая регистрация на сайте при помощи Ajax торрент можно по ссылкам расположенным выше. Для скачивания вам понадобиться вот эта программа µTorrent.

Данный материал предоставлен сайтом Quantum-Soft.NET исключительно в ознакомительных целях.

Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Ключевые теги: помощи, регистрация, сайте, Простая, Ajax,





Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.