0

Доброго времени суток. Подскажите пожалуйста такую вещь. Регистрация и авторизация PHP+MySQL+Ajax. Сама регистрация и авторизация работает без перезагрузки, не пойму просто как мне после успешной регистрации(авторизации) вывести в форму сообщение об этом или в случае ошибки, вывести ошибку. Понимаю, что это всего пара строчек, но..пока еще изучаю. Вот код формы(пусть будет регистрация)

<form action="/signup.php" method="POST" class="reg_form" id="reg-form">
                  <a href="#" class="reg-close"></a>
                  <div class="msgs"></div>
                  <p class="reg__line">
                    <p class="label__title">Ваш логин</p>
                    <input type="text" name="login" value="<?php echo @$data['login']; ?>">
                  </p>
                  <p class="reg__line">
                    <p class="label__title">Ваш email</p>
                    <input type="email" name="email" value="<?php echo @$data['email']; ?>">
                  </p>
                  <p class="reg__line">
                    <p class="label__title">Ваш пароль</p>
                    <input type="password" name="password" value="<?php echo @$data['password']; ?>">
                  </p>
                  <p class="reg__line">
                    <p class="label__title">Подтвердите Ваш пароль</p>
                    <input type="password" name="password_2" value="<?php echo @$data['password_2']; ?>">
                  </p>
                  <p class="reg__line">
                    <button type="submit" class="reg__button" name="do_signup">Регистрация</button>
                  </p>
                </form>

вот обработчик php

<?php
  require "includes/db.php";

  $data = $_POST;
  if( isset($data['do_signup']))
  {
    // здесь регистрация

    $errors = array();
    if( trim($data['login']) == '')
        {
            $errors[] = 'Введите логин!';
          }
      if( trim($data['email']) == '')
        {
            $errors[] = 'Введите email!';
          }
      if( $data['password'] == '')
        {
            $errors[] = 'Введите пароль!';
          }
      if( $data['password_2'] != $data['password'])
        {
            $errors[] = 'Повторный пароль введен не верно!';
          }
      if( R::count('users', "login = ?", array($data['login'])) > 0)
        {
            $errors[] = 'Пользователь с таким логином уже существует!';
          }
      if( R::count('users', "email = ?", array($data['email'])) > 0)
        {
            $errors[] = 'Пользователь с таким Email уже существует!';
          }

         if( empty($errors))
         {
            // все прошло, регистрируем
            $user = R::dispense('users');
            $user->login = $data['login'];
            $user->email = $data['email'];
            $user->password = password_hash($data['password'], PASSWORD_DEFAULT);
            R::store($user);
            // header('Location:/');
             // echo '<div style="color: green">Вы успешно зарегистрированы!</div><hr>';
             echo '<p class="success" style="color: green;font-size: 18px;">Вы зарегистрированы</p>';
         } else 
         {
             // echo '<div style="color: red">'.array_shift($errors).'</div><hr>';
             echo '<p class="success" style="color: red;font-size: 18px;">'.array_shift($errors).'</p>';
         }
  }
?>

а вот ajax

var inst = $('#reg-form');
var inst1 = $('#auth-form');

$(document).ready(function() {

  $('form').submit(function(event) {
    var formID=$(this).attr('id');
    var formNm=$('#'+formID);
    var message=$(formNm).find(".msgs");

      event.preventDefault();

      $.ajax({
          type: $(this).attr('method'), 
          url: $(this).attr('action'),
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData: false,

          success: function() {


          },
      });
  });
});

подключение к базе с помощью RedBeanPHP

2 ответа 2

1

Например: После формы делаете <div class='message'></div>. В js в функции параметра success ajax'а прописываем:

success: function(data) {
    $('div.message').html(data);
},
3
  • Хорошо, а что туда будет выводится?как вывести туда успешную запись или что конкретно пользователь сделал не верно?
    – Deniskins
    3 апр 2018 в 9:06
  • В data попадёт вывод echo файла обработчика формы
    – RaZik
    3 апр 2018 в 9:07
  • вот что выдало в консоли при вставке вышеуказанного кода Uncaught ReferenceError: data is not defined at Object.success (form.js:23) at i (jquery-3.2.0.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.2.0.min.js:2) at A (jquery-3.2.0.min.js:4) at XMLHttpRequest.<anonymous> (jquery-3.2.0.min.js:4)
    – Deniskins
    3 апр 2018 в 9:09
1

Добрый день. На стороне сервера можно сформировать массив, который будет содержать данные об успешной регистрации или ошибки. Массив $errors у Вас уже есть.

<?php
  if( empty($errors)){
    $answer = ['type' => 'success', 'message' => 'Вы зарегистрированы'];
  }  
  else{
     $answer = ['type' => 'error', 'message' => $errors];
  }
  echo json_encode($answer);
?>

В js можно получить так

success: function(data) {
  var response = jQuery.parseJSON(data);
  if(response.type == 'success'){
    var html = '<p class="success" style="color: green;font-size: 18px;">' + response.message + '</p>
    $('div.message').html(html);
  }
  if(response.type == 'error'){
     // разбираете массив с ошибками вы показываете пользователю
  }
},

Пример отправки данных и файла с формы

<script type="text/javascript">
$(function() {
    $('#form-data').on('submit', function(e){
        e.preventDefault()
        var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
        var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData
        // Сбор данных из обычных полей
        form.find(':input[name]').not('[type="file"]').each(function() { 
            var field = $(this);
            data.append(field.attr('name'), field.val());
        });
        // Сбор данных о файле (будет немного отличаться для нескольких файлов)
        var filesField = form.find('input[type="file"]');
        var fileName = filesField.attr('name');
        var file = filesField.prop('files')[0];
        data.append(fileName, file) ;
        // Отправка данных
        var url = 'upload.php';
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            contentType: false,
            cache: false, 
            processData:false, 
            success: function(response) {
                console.log(response)
            }           
        });  
    })          
});
</script>  
10
  • В консоль выдает то же, что и в предыдущем ответе вот Uncaught ReferenceError: data is not defined at Object.success (form.js:24) at i (jquery-3.2.0.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.2.0.min.js:2) at A (jquery-3.2.0.min.js:4) at XMLHttpRequest.<anonymous> (jquery-3.2.0.min.js:4) Почему так может быть?
    – Deniskins
    3 апр 2018 в 9:24
  • Вот здесь data: new FormData(this),. Сначала сформируйте данные, а потом подставляйте в запрос.
    – user216615
    3 апр 2018 в 9:31
  • Вот таким образом data:formNm.serialize(), ? formNm это id формы. Результат такой же - ошибка
    – Deniskins
    3 апр 2018 в 9:38
  • Проверьте ошибки на стороне сервера.
    – user216615
    3 апр 2018 в 9:42
  • дополнил ответ рабочим примером для отправки формы
    – user216615
    3 апр 2018 в 9:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.