Вызов пользовательских функций PHP с использованием AJAX в том же файле

Question

Я пытаюсь обработать форму на PHP, однако я не хочу, чтобы страница обновлялась при нажатии кнопки отправки. Вместо этого я хочу проверить правильность адреса электронной почты и пароля; затем либо зарегистрируйте пользователя, либо отобразите сообщение об ошибке (login_error в примере).

Все фрагменты кода, приведенные ниже, находятся в одном файле, мой вопрос: как вызвать функцию php с помощью AJAX для обработки формы в том же файле?

Форма:

<!-- Model dialog for login button --> 
    <div class="modal fade" id="login" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <form class="form-horizontal" role="form" id="login_form" action="index.php" method="POST"> 
        <div class="modal-header"> 
         <h4>Login</h4> 
        </div> 

        <div class="modal-body"> 
         <div class="form-group" id="login_error"> 
          <label for="login-username" class="col-sm-2 control-label"></label> 
          <div class="col-sm-10" style="color: red;"> 
           Oops! Your username or password is incorrect, please try again! 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="login-username" class="col-sm-2 control-label">Email</label> 
          <div class="col-sm-10"> 
           <input required type="text" class="form-control" name="login-email" placeholder="Username"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="login-password" class="col-sm-2 control-label">Password</label> 
          <div class="col-sm-10"> 
           <input required type="password" class="form-control" name="login-password" placeholder="Password"> 
          </div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-default" data-dismiss="modal" href = "#register" data-toggle="modal" formnovalidate>Register</button> 
         <button type="submit" class="btn btn-success" name="login_submit" id="login_submit">Login</button> 
        </div> 
       </form> 
      </div>    
     </div> 
    </div> 

PHP Я хочу назвать:

<?php 
    if (isset($_POST["login_submit"])) { 
     $email = $_POST["login-email"]; 
     $password = $_POST["login-password"]; 

     if (login($email, $password)) { 
      die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>"); // Set the cookie 
     } else { 
      echo "<script>$('#login_error').show();</script>"; 
     } 
    } 
?> 

JQuery:

<script> 
     $("#login_error").hide(); 

     $("#login_submit").click(function (e) { 
      e.preventDefault(); 
      $.ajax({url: '/PHP%20Files/Computing%20Project%20-%20Website/ICTeacher/LoginSystem/wrongpassword.php', 
       data: {action: 'index.php'}, 
       type: 'post', 
       success: function (output) { 
        alert(output); 
       } 
      }); 
     }); 

    </script> 

Answer 1

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

<?php 
    if($_SERVER['REQUEST_METHOD']=='POST' && isset($_POST["login_submit"])) { 

     ob_clean();/* discard any output there may have been so far in the document */ 

     $email = $_POST["login-email"]; 
     $password = $_POST["login-password"]; 

     if (login($email, $password)) { 
      die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>"); // Set the cookie 
     } else { 
      echo "<script>$('#login_error').show();</script>"; 
     } 


     /* the ajax request should only process to this point */ 
     exit(); 
    } 
?>