More than 3 years have passed since last update.

jQuery を使ったログイン画面

Last updated at 2021-06-13Posted at 2017-06-09

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

<!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>

.center
{
	width: 80%;
	margin: 0 auto;
}

// ---------------------------------------------------------------
//	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 />';
	}
// --------------------------------------------------------------------
?>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up