Bootstrap модал от входа в php с помощью ajax - PullRequest
0 голосов
/ 24 января 2019

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

если я ввожу какие-либо данные, они показывают успешное предупреждение и не проверяют мои данные!

Я также ввел систему верификации при входе в систему, поэтому вход в систему возможен только после подтверждения по электронной почте, но он также не работает с ajax.

Пожалуйста, помогите!Как написать ajax для этого кода входа php?

То, что я пробовал, только что дано в коде.

login.php

<?php
    $msg = "";

    if (isset($_POST['login_button'])) {
            $con = new mysqli('localhost', 'root', '', 'research');

        $email = $con->real_escape_string($_POST['email']);
        $password = $con->real_escape_string($_POST['password']);

        if ($email == "" || $password == "")
            $msg = "Please check your inputs!";
        else {
            $sql = $con->query("SELECT id, password, isEmailConfirmed FROM users WHERE email='$email'");
            if ($sql->num_rows > 0) {
                $data = $sql->fetch_array();
                if (password_verify($password, $data['password'])) {
                    if ($data['isEmailConfirmed'] == 0)
                        $msg = "Please verify your email!";
                    else {
                        $msg = "You have been logged in";

                    }
                } else
                    $msg = "Please check your inputs!";
            } else {
                $msg = "Please check your inputs!";
            }
        }
    }
?>

Скрипт включен в index.php

<script>

$(document).ready(function(){
    $('#login_button').click(function(){
         var email = $('#email').val();
         var password1 = $('#password1').val();
         if(email!= '' && password1!= '')
         {
              $.ajax({
                   url:"login.php",
                   type:"POST",
                   data: {email:email, password1:password1},
                   success:function(data)
                   {
                        //alert(data);
                        if(data == 'Please check your inputs!')
                        {
                             alert("Wrong Data");
                        }
                        else
                        {
                             $('#elegantModalForm').hide();
                             location.reload();
                             alert("Successful");
                        }
                   }
              });
         }
         else
         {
              alert("Both Fields are required");
         }
    });
  /*  $('#logout').click(function(){
         var action = "logout";
         $.ajax({
              url:"action.php",
              method:"POST",
              data:{action:action},
              success:function()
              {
                   location.reload();
              }
         });
    });*/
});
</script>

Модальный код начальной загрузки, написанный на index.php

  <!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">


  <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content form-elegant">
      <!--Header-->
      <div class="modal-header text-center">

        <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body mx-4">
        <!--Body-->
        <div class="md-form mb-5">
          <input type="email" name="email" id="email" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
        </div>

        <div class="md-form pb-1">
          <input type="password" id="password1" name="password1" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
          <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
              Password?</a></p>
        </div>

        <div class="text-center mb-3">
          <button type="button" class="btn btn-primary display-4" name="login_button" id="login_button">Sign in</button>
        </div>
        <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
          with:</p>

        <div class="row my-3 d-flex justify-content-center">
          <!--Facebook-->
          <button type="button" class="btn btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
          <!--Twitter-->
          <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
          <!--Google +-->
          <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer mx-5 pt-3 mb-1">
        <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
            Sign Up</a></p>
      </div>
</div>
</div>
</div>
<!-- Modal -->

1 Ответ

0 голосов
/ 25 января 2019

<script>

$(document).ready(function(){
    $('#login_button').click(function(){
         var email = $('#email').val();
         var password1 = $('#password1').val();
         if(email!= '' && password1!= '')
         {
              $.ajax({
                   url:"login.php",
                   type:"POST",
                   data: {email:email, password1:password1},
                   success:function(data)
                   {
                        //alert(data);
                        if(data == 'Please check your inputs!')
                        {
                             alert("Wrong Data");
                        }
                        else
                        {
                             $('#elegantModalForm').hide();
                             location.reload();
                             alert("Successful");
                        }
                   }
              });
         }
         else
         {
              alert("Both Fields are required");
         }
    });
  /*  $('#logout').click(function(){
         var action = "logout";
         $.ajax({
              url:"action.php",
              method:"POST",
              data:{action:action},
              success:function()
              {
                   location.reload();
              }
         });
    });*/
});
</script>
...