Новичок
Покинул форум
Сообщений всего: 2
Дата рег-ции: Авг. 2013
Помог: 0 раз(а)
|
Здраствуйте, будьте добры помочь)
Есть например скрипт для динамического вывода инфы с помощью AJAX о том занят ли логин или нет.
Вот форма:
Спойлер (Отобразить)
CODE ( html):
скопировать код в буфер обмена
<script src="./js/register.js" language="javascript"></script> <span id="responsetext"> </span> <form name="register_form" action="register.php" method="post" class="form-horizontal"> <div class="col-sm-6 col-sm-offset-3"> <div class="form-group" id="login_input"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span> <input name="login" id="logininput" onblur="javascript:checkLogin()" type="text" class="form-control" placeholder="Логин" aria-describedby="basic-addon1" maxlength="16"> </div></div></div> <div class="col-sm-6 col-sm-offset-3"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span> <input name="email" type="text" class="form-control" placeholder="Почта" aria-describedby="basic-addon1" maxlength="32"> </div></div></div> <div class="col-sm-6 col-sm-offset-3"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span> <input name="password" type="password" class="form-control" placeholder="Пароль" aria-describedby="basic-addon1" maxlength="32"> </div></div></div> <div class="col-sm-6 col-sm-offset-3"> <div class="form-group"> <button type="submit" name="submit" class="btn btn-success"><i class="fa fa-user-plus" aria-hidden="true"></i> Зарегистрироваться</button> </div></div> </form>
Вот сам javascript:
Спойлер (Отобразить)
CODE ( javascript):
скопировать код в буфер обмена
function getXmlHttp() { var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } var xmlhttp = getXmlHttp(); function checkLogin() { xmlhttp.open('POST', './reg.php', true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xmlhttp.send("login=" + encodeURI(document.getElementById('logininput').value)); document.getElementById('responsetext').innerHTML = '<div class="alert alert-warning" role="alert">Загрузка...</div>'; xmlhttp.onreadystatechange = loginReply; } function loginReply() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { if (xmlhttp.responseText == '1') { document.getElementById("responsetext").innerHTML = '<div class="alert alert-danger" role="alert">Аккаунт с таким логином уже существует!</div>'; document.getElementById("login_input").setAttribute("class", "form-group has-error"); } else if (xmlhttp.responseText == '2') { document.getElementById("responsetext").innerHTML = '<div class="alert alert-danger" role="alert">Заполните поле логин!</div>'; document.getElementById("login_input").setAttribute("class", "form-group has-error"); } else if (xmlhttp.responseText == '0') { document.getElementById("responsetext").innerHTML = '<div class="alert alert-success" role="alert">Логин свободен</div>'; document.getElementById("login_input").setAttribute("class", "form-group has-success"); } } } }
Вот скрипт php самой проверки логина на занятость:
Спойлер (Отобразить)
PHP:
скопировать код в буфер обмена
<?PHP //Подключение к базе if(isset($_POST['login']) and $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") { if(!empty($_POST['login'])) { $result = mysql_query("SELECT * FROM users WHERE login='$login' LIMIT 1"); { echo '1'; } else echo '0'; } else echo '2'; } ?>
Не обращайте внимания если найдете какой-то быдло код или еще что-то тупое) я новичок и только учусь)
Вопрос вот в чем, конечно конкретно к данному примеру не очень подходит, но мне для понимания сути и последующей разработки мне очень важно просто сам принцип понять.
Эта форма регистрации загружается на страницу по адресу /register.php, в которую собирается шаблон, собственно сама форма и еще несколько скриптов для самой регистрации.
Вообщем суть вопроса. Я вот узнал про такую крутую штуку AJAX и решил ее как раз попробывать для вывода динамического сообщения о занятости логина. Теперь я хочу использовать AJAX полностью везде в своем проекте для динамического контента. В принципе я это сделаю, но вопрос вот в чем, получится что у меня будет одностраничный сайт где обновляется контент и адрес меняться не будет, поэтому на какой то конкретный контент например ссылку получить не удастся. Я прочитал кучу инфы по history api и готовый плагин PJAX (pushstate + AJAX), но так нихрена и не понял, да и хочу без плагина сам понять как это работает, поэтому, конечно конкретно к данному примеру не очень подходит, но мне для понимания сути и последующей разработки мне очень важно просто сам принцип понять. Может ли мне кто нибудь обьяснить или даже привести на примере моего кода куда и как мне вставить код с history api, чтобы скажем
при ответе с сервера xmlhttp.responseText == '0'или 1 или 2 адрес менялся на register.php?errorcode=0 или 1 или 2. И чтобы скажем при прямом обращении по этой ссылке показывались эти ошибки. и при перемещении вперед назад кнопками браузера, тоже все учитывалось. Буду премного благодарен.
|