PHP login with 2d array and no page refresh using $.get or $



我在这里找到了一个工作代码,该代码在他登录时返回用户的相应user_id。但是,我需要使用$ .get或$ .. jquery的$ .post不会刷新页面。我阅读了有关使用$ .get和$ .post的帖子,但我似乎不了解它们。

这是我的工作代码。请帮助我申请$。谢谢!

<?php
    $login = array
        ( 
               0=>array
                    ( 'username'=>'Art', 
                      'password'=>'p@ssw0rd',
                      'user_id'=>'1'              
                    ),
               1=>array
                    ( 'username'=>'Berto',
                      'password'=>'1234',
                      'user_id'=>'2'
                    ),
               2=>array
                    ( 'username'=>'Carrie',
                      'password'=>'5678',
                      'user_id'=>'3'
                    ),
               3=>array
                    ( 'username'=>'Dino',
                      'password'=>'qwer',
                      'user_id'=>'4'
                    ),
               4=>array
                    ( 'username'=>'Ely',
                      'password'=>'asdf',
                      'user_id'=>'5'
                    )
             );          
  if (isset($_POST['submit']))
  {
    $found_user = false;
    $uname = $_POST['user'];
    $pass = $_POST['password'];
    foreach ($login as $sub_array) {
        if ($uname == $sub_array['username'] && $pass == $sub_array['password']) {
            $found_user = true;
            $message = $sub_array['user_id'];
            break;
        }
    }
        if ($found_user) {
            $message = ( $sub_array['user_id'] );
            echo "<script type='text/javascript'>
            alert('Your user ID is : $message');
            </script>";
        } else {
            echo "<script type='text/javascript'>
            alert('Invalid username/password.');
            </script>";
        }
}
?>
<body>
<form action="" method="post">
<label for="name"><span class="nameLabel">Username: </span></label>
<span class="nameLabel">
<input name="user" type="text" class="name" id="user" />
</span>
<label for="pass" class="passwordLabel">Password: </label>
<input name="password" type="password" class="password" id="password" />
<input name="submit" type="submit" class="logIn" id="login" value="Log In"/>
</form>
</body>

您需要ajax来满足您的要求:

1)您需要在单独的PHP文件中分开PHP登录功能。
2)单击登录按钮时,您需要进行AJAX调用。您需要为Ajax调用添加一些JavaScript。
3)在您的HTML文件中添加jQuery

您的php文件(我命名为t2.php)

$login = array
(
    0=>array
    ( 'username'=>'Art',
        'password'=>'p@ssw0rd',
        'user_id'=>'1'
    ),
    1=>array
    ( 'username'=>'Berto',
        'password'=>'1234',
        'user_id'=>'2'
    ),
    2=>array
    ( 'username'=>'Carrie',
        'password'=>'5678',
        'user_id'=>'3'
    ),
    3=>array
    ( 'username'=>'Dino',
        'password'=>'qwer',
        'user_id'=>'4'
    ),
    4=>array
    ( 'username'=>'Ely',
        'password'=>'asdf',
        'user_id'=>'5'
    )
);

    $found_user = false;
    $uname = $_POST['user'];
    $pass = $_POST['password'];
    foreach ($login as $sub_array) {
        if ($uname == $sub_array['username'] && $pass == $sub_array['password']) {
            $found_user = true;
            $message = $sub_array['user_id'];
            break;
        }
    }
    if ($found_user) {
        $message = ( $sub_array['user_id'] );
           echo "Your user ID is : $message";

    } else {
            echo 'Invalid username/password.';
    }

在您的html文件中:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="" method="post" id="login-form">
    <label for="name"><span class="nameLabel">Username: </span></label>
<span class="nameLabel">
<input name="user" type="text" class="name" id="user" />
</span>
    <label for="pass" class="passwordLabel">Password: </label>
    <input name="password" type="password" class="password" id="password" />
    <input name="submit" type="button" class="logIn" id="login" value="Log In"/>
</form>
<script type="text/javascript">
    $( document ).ready(function() {
       $("#login").click(function(e){
           e.preventDefault();
           $.ajax({
               url: "t2.php",
               type: "post",
               data: $("#login-form").serialize(),
               success: function(data){
                   alert(data);
               }
           })
       })
    });
</script>

您需要学习ajax-php-jquery的基础:http://blog.teamtreehouse.com/beginners-guide-to-to-ajax-development-with-php

with index.php是您的php脚本名称。

$("#login").click(function(event) {
    event.preventDefault();
    $.post('index.php', $("form").serialize(), function(data) {
         // Whatever you want
         console.log(data); // Open browser console to see your responsed data.
    });
});

最新更新