jQuery を使ったログイン画面

  • 2
    いいね
  • 0
    コメント

次のページを参考にしました。
http://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9

login_jun09.png

login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="login.js"></script>
<link href="login.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<div class="center">
<h2>ログイン画面</h2>
<table>
<tr><td>名前</td><td><input type="text" name ="userid" id ="userid"></td></tr>
<tr><td>パスワード&nbsp;</td><td><input type="text" name ="password" id="password"></td></tr>
</table>
<p />
<button id="submit">submit</button>
</div>
<p />
<div class="result"></div>
<p />
Jun/09/2017<p />
</body>
</html>
login.css
.center
{
    width: 80%;
    margin: 0 auto;
}
login.js
// ---------------------------------------------------------------
//  login.js
//
//                      Jun/09/2017
// ---------------------------------------------------------------
jQuery(function()
{
    jQuery('#submit').on('click',function()
        {
                jQuery.ajax({
                    url:'request.php',
                    type:'POST',
                    data:{
                        'userid': jQuery('#userid').val(),
                        'password': jQuery('#password').val()
            }
                })
                .done(function(data){
                    jQuery('.result').html(data)
                    console.log(data)

                })
                .fail(function(data){
                    jQuery('.result').html(data)
                    console.log(data)
                })
    })
})

// ---------------------------------------------------------------
request.php
<?php
// --------------------------------------------------------------------
/*
    request.php

                    Jun/09/2017
*/
// --------------------------------------------------------------------
function password_gen ()
{
    $password = array ();
    $password['scott'] = 'tiger';
    $password['jack'] = 'jones';
    $password['betty'] = 'smith';

    return  $password;
}

// --------------------------------------------------------------------
header('Content-type: text/plain; charset= UTF-8');

$password= password_gen ();

if(isset($_POST['userid']) && isset($_POST['password']))
    {
    $id = $_POST['userid'];
    $pass = $_POST['password'];
    if (isset ($password[$id]))
        {
        if ($pass == $password[$id])
            {
            echo 'OK' . '<br />';
            }
        else
            {
            echo 'NG' .'<br />';
            }
        echo 'userid: ' . $id .'<br />';
        echo 'password: ' . $pass . '<br />';
        }
    else
        {
        echo 'NG' .'<br />';
        }
    }
else
    {
    echo 'NO' .'<br />';
    }
// --------------------------------------------------------------------
?>