Авторизация&Регистрация в одельном окне

Статус
В этой теме нельзя размещать новые ответы.

rasandrey

Участник
Регистрация
2 Апр 2009
Сообщения
214
Реакции
6
В общем есть простая регистрация и авторизация средствами php. Хочу сделать в отдельном модальном окне, но не соображу как выводить сообщения об ошибках обратно в окно после проверки в php коде (например, логин и пароль).
Подскажите или покажите как :nezn:
 
В общем есть простая регистрация и авторизация средствами php. Хочу сделать в отдельном модальном окне, но не соображу как выводить сообщения об ошибках обратно в окно после проверки в php коде (например, логин и пароль).
Подскажите или покажите как :nezn:

Сделай через AJAX. На JQUERY Например.
В окне у тебя будет <form id="form">...</form> . ТОлько вместо кнопки "отправить" какой нибудь другой элементик, например <div onclick="go()">...</div>

Ну и функцию go() в Жаваскрипте:
PHP:
 var params=$("#form").serialize();         
        $.post('{$protocol}://{$HOST}/ajaxresponder.php?m=login&SN={$SN}',params,
            function(data){
               //эта функуия - обработчик твоего результата
               if(dara.status){
                 если все гуд - чегото делаешь, например редирект.
               }else{
                 alert(data.text);
                  или если не хочешь алерт
                $("#ID блока для ошибок").html(data.text);
               }   
              
            },
        "json"
      );
Для приема этой формы понадобится PHP скриптик, у нас он ajaxresponder.php:
PHP:
error_reporting(0); //отключить все сообщения PHP чтобы не нарушить формат JSON Следи за тем чтобы ничего лишнего не выводилось и выводилось тоолько 1 раз.
$SID=$_GET('SN'); //' это поле передавалось через ГЕТ (см. на УРЛ в ЖСкрипте)
if($SID) 
  session_start($SID);
else
  session_start();
$method=$_GET('m'); //' это поле передавалось через ГЕТ тоже
if(method=='m'){
Достаешь из $_POST свою форму и делаешь авторизацию/регистрацию
....
if(Успешная регистрация) 
    echo json_encode(array('status'=>1,"text"=>"можно пустой текст"); 
else 
    echo json_encode(array('status'=>0,"text"=>"Сообщение об ошибке. Если будут траблы с кодировками - используй для этого текста ICONV()"); 
}
Индексы "status" и "text" потому что и в JS выбрали data.text и data.status. Для работы необходима сессия, PHP 5.2 и выше. Если трабла с 5.2 (что вряд ли), значит json_encode работать не будет и придется самому писать сериализацию массива в формат json. Там где в ЖС $protocol://$HOST - заменишь на HTTP(S) и название сайта соответствеено.
 
json отправлять введенные данные пользователя, обрабатывать их скриптом.
 
я только недавно делал такую штуку
и так
берем
1-jQuery JavaScript Library v1.4.2 (jquery.js)
2-jQuery Tools 1.2.4 Overlay (jquery.overlay.js)
3-Query Form Plugin 2.47 (04-SEP-2010)(jquery.form.js)

код который будет обрабатывать формы и модальные окна

Код:
/**
   * Создание модального окна
   * загрузка данных хранящихся в ссылке с rel='#overlay'
   */
$(document).ready(function(){
  $("a[rel]").overlay({
    mask: {
      color: '#fff',
      loadSpeed: 200,
      opacity: 0.5
    },
    effect: 'apple',
    closeOnClick: false,
    onBeforeLoad: function() {
      // grab wrapper element inside content
      var wrap = this.getOverlay().find("#modalbox");
      // load the page specified in the trigger
      wrap.load(this.getTrigger().attr("href"));
    }
  });
});
/**
   * Обработка форм с id x-form
   * отправка данных
   */
function xform() {
  $(document).ready(function(){
    var options = {
      //target: "#modalbox",
      //url: "{action}",
      //beforeSubmit: Request, // функция, вызываемая перед передачей
      success: Response, // функция, вызываемая при получении ответа
      type: "post", // get или post
      dataType: "html", // text, hmtl, xml, script или json
      //clearForm: true,
      resetForm: true,
      timeout: 10000 // ожидание ответа в милисекундах
    };
    $("#x-form").submit(function() {
      $(this).ajaxSubmit(options);
      return false;
    });
  });
  /**
   * Отладочная функция,
   * отображение того что будет передаватся
   */
  function Request(formData, jqForm, options) {
    var queryString = $.param(formData);
    alert("Вот что мы передаем: \n\n" + queryString);
    return true;
  }
  /**
   * Обработка получаемого ответа
   * переменная должна соотвествовать возвращаемому типу, данных (html, xml, json)
   * @param response
   */
  function Response(responseText)  {
    //alert("status: " + statusText + "\n\nresponseText: \n" + responseText + "\n\nThe output div should have already been updated with the responseText.");
    $("#modalbox").html(responseText);
    if ( responseText.length < 1 ) {
      $("a[rel]").each(function() {
        $(this).overlay().close();
      });
    }
  }

}
// Form-Post

далее нам понадобится
HTML
Мобдальное окно
Код:
  <!-- overlayed modal box -->
  <div class="overlay" id="overlay">
    <div class="modalbox" id="modalbox"></div>
  </div>
</body>
</html>
у меня оно к вонце страницы)
далее
примерная форма
<div id='title'><h2>Авторизация</h2></div>
<div id='content' valign='top'>
<script type="text/javascript">
xform();
</script>

<form name='x-form' id='x-form' method='post' action='http://extreme.ru/login/index.html' title='Авторизация'>
<input name='task' id='task' type='hidden' value='login' />
<div id='container'>
<div class='block'>
<fieldset>
<label style='width: 170px'>Логин</label><input name='ulogin' id='ulogin' type='text' size='20' maxlength='250' onfocus='this.value=""' value='Логин' /><br>
<label style='width: 170px'>Пароль</label><input name='upassword' id='upassword' type='password' size='20' maxlength='250' onfocus='this.value=""' value='Пароль' /><br>
<label style='width: 170px'>Запомнить меня</label><input name='remember' id='remember' type='checkbox' /><br>
<input name='send' id='send' type='submit' class='button' style='width: 316px' value='Вход' /><br>
<input name='lost' id='lost' type='button' class='button' style='width: 157px' rel='#overlay' src='http://extreme.ru/restoration/index.html' onClick='document.location="http://extreme.ru/restoration/index.html"' value='Забыли пароль' /><input name='register' id='register' type='button' class='button' style='width: 157px' onClick='document.location="http://extreme.ru/registration/index.html"' value='Регистрация' />
</fieldset>
</div>
<div class='block'>Используйте действующие <b>Имя пользователя</b> и <b>Пароль</b> пользователя для авторизации на сайте.</div>
</div>
</form>

ссылки те которые надо котрывать в модальном окне
в них доп параметр rel='#overlay'
у форм name='x-form' id='x-form'


в ПХП в генерации шаблона отключать футеры, боковинки и тп и отдавать только сами данные если пришел вот такой заголовок

Код:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{тут выдаем только данные для модальных окон.}

если есть впросы пиши

Добавлено через 2 минуты
В ФОРМАХ НЕ ИСПОЛЬЗОВАТЬ enctype
иначе, если будешь использовать заголовок XMLHttpReques не будет проставлятся

Добавлено через 4 минуты
да этот пример будет работать с отлюченой явой)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху