LoginSignup
4

More than 3 years have passed since last update.

jQuery と python を使ったログイン画面

Last updated at Posted at 2017-06-09

次のページのサーバーサイドを PHP から、python に変えました。
jQuery を使ったログイン画面

login_jun10.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.4.0.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/10/2017<p />
</body>
</html>
login.css
/* -------------------------------------------------------------------- */
/*
    login.css

                    Jun/10/2017
*/
/* -------------------------------------------------------------------- */
.center
{
    width: 80%;
    margin: 0 auto;
}
/* -------------------------------------------------------------------- */
login.js
// ---------------------------------------------------------------
//  login.js
//
//                      Jun/10/2017
// ---------------------------------------------------------------
jQuery(function()
{
    jQuery('#submit').on('click',function()
        {
        const url="login_check.py"

        const userid = jQuery('#userid').val()
        const password = jQuery('#password').val()
        const args = {"userid": userid,"password": password}

        jQuery.post (url,args,function (message)
            {
            var str_out = ""
            for (var it in message)
                {
                str_out += message[it] + "<br />"
                }
            jQuery('.result').html(str_out)
            console.log(data)
            })

    })
})

// ---------------------------------------------------------------
login_check.py
#! /usr/bin/python3
# -*- coding: utf-8 -*-
#
#   login_check.py
#
#                   Jun/10/2017
#
# --------------------------------------------------------------------
import  sys
import  cgi
import  json
# --------------------------------------------------------------------
def password_db_get_proc():
    password_db = {}
    password_db['scott'] = 'tiger'
    password_db['jack'] = 'jones'
    password_db['betty'] = 'smith'

    return  password_db
#
# --------------------------------------------------------------------
def hantei_proc(userid,password):
    password_db = password_db_get_proc()
    is_certificated = userid in password_db and password == password_db[userid]
    return  is_certificated
#
# --------------------------------------------------------------------
ff=cgi.FieldStorage()
#
userid = ff.getfirst("userid","")
password = ff.getfirst("password","")
#
message = []
hantei = hantei_proc(userid,password)
if hantei:
    message.append('OK')
else:
    message.append('NG')
#
message.append(userid)
message.append(password)
#
out_str = json.dumps(message)
print("Content-type: text/json\n\n")
print(out_str)
# --------------------------------------------------------------------

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
4