使用jQuery页面登录

Question

I want to create on-page login system.

Without javascript I can login perfectly in this structure:

<?php
require_once('login.php');
$login = new Login();

// if we are logged in here:
if ($login->isUserLoggedIn() == true) {
    // yes we are
    echo "<div id=\"login\">you logged in as  $_SESSION[user_name]. <a href=\"?logout\">Logout</a></div>";

} else {
    // no
   echo "

        <div id=\"login\" style=\"display: none;\"> 

           <form action=\"index_.php\" method=\"post\" name=\"loginform\" id=\"loginform\" onsubmit=\"return false;\">

                <input type=\"text\" class=\"form-control\" id=\"user_name\" name=\"user_name\><br>

                <input type=\"password\" class=\"form-control\" id=\"user_password\" name=\"user_password\"><br>

                <label class=\"checkbox-label\" style=\"pointer-events: all;\" for=\"user_rememberme\"><input checked class=\"user_rememberme\" name=\"user_rememberme\" id=\"user_rememberme\" value=\"1\" type=\"checkbox\"/> 
                Remember me</label>

                <a href=\"#frg\" class=\"frg float:right; display:inline;\">Forgot Password?</a>     

                <input class=\"btn btn-success\" type=\"submit\" name=\"login\" id=\"loginbutton\" value=\"Login\">

           </form>

        </div><!-- login ends -->

        ";
}
?>

Currently on working system, I'm sending form to current page. And code below telling user the result: (for instance. you logged in, please activate your account, login failed.)

<?php
// I send the form same page upside.
// and if i login or not, codes below lets me know.
if (isset($login)) {
    if ($login->errors) {
        foreach ($login->errors as $error) {
            echo "<div id=\"message\">$error</div>";
        }
    }
    if ($login->messages) {
        foreach ($login->messages as $message) {
            echo "<div id=\"message\">$message</div>";
        }
    }
}
?>

As a next step, I want to login on-page with the help of ajax. So Here is my javascript code to start with:

<script type="text/javascript">
// login on page
        $(function(){
            $("#loginform").submit(function(){  // .click yerine .submit
                if($("#loginform").valid()){

                $.ajax({
                    type: "POST",
                    url: "index_.php",
                    data: $("#loginform").serialize(),
                    beforeSend: function(){
                        $('#message').html('Loading...');               
                    },
                    success: function(data){
                        $('#message').html(data);

                    }
                });
                }
            });
        });    
</script>

Specifically this part of javascript code

success: function(data){ $('#message').html(data);

I want to output my php result, but copying php inside of data obviously doesn't work.

What should I do?

Answer 1

You can add an extra POST-Field (for example "AJAX") and return other output, if this is set

 $.ajax({
         type: "POST",
         url: "index_.php",
         data: $("#loginform").serialize() + "&ajax=1",