LoginSignup
5
5

More than 1 year has passed since last update.

jQuery を使ったログイン画面

Last updated at Posted at 2017-06-09

次のページを参考にしました。
はじめてのAjax(jQuery) 2018年版

login_jun09.png

login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<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/13/2021<p />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="login.js"></script>
</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 />';
    }
// --------------------------------------------------------------------
?>
5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5