install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
Create TABLE
CREATE TABLE users (
id serial PRIMARY KEY,
fullname VARCHAR ( 100 ) NOT NULL,
username VARCHAR ( 50 ) NOT NULL,
password VARCHAR ( 255 ) NOT NULL,
email VARCHAR ( 50 ) NOT NULL
);
PostgreSQL SERIAL To Create Auto-increment Column
CREATE TABLE users (
id serial PRIMARY KEY
);
#app.py
from flask import Flask, render_template, request, jsonify
import psycopg2 #pip install psycopg2
import psycopg2.extras
app = Flask(__name__)
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)
@app.route('/')
def index():
return render_template('home.html')
@app.route('/user_check', methods=['POST'])
def username_check():
username = request.form['username']
print(username)
# validate the received values
if username and request.method == 'POST':
cursor = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
cursor.execute('SELECT * FROM users WHERE username = %s', (username,))
row = cursor.fetchone()
if row:
resp = jsonify('Username unavailable')
resp.status_code = 200
return resp
else:
resp = jsonify('Username available')
resp.status_code = 200
return resp
else:
resp = jsonify('Username is required field.')
resp.status_code = 200
return resp
if __name__ == "__main__":
app.run(debug=True)
templates/home.html
//templates/home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery AJAX Check Availability username with Python Flask PostgreSQL</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div style="margin: 10px 0 0 10px;width: 600px">
<h3>Jquery AJAX Check Availability username with Python Flask PostgreSQL</h3>
<form id="signupform" style="padding: 10px;">
<fieldset>
<legend>Check username</legend>
<div>
<p style="padding-bottom:5px;font-weight:bold;">Username</p>
<input type="text" class="form-control" name="username" id="username" autocomplete="off"/>
<div id="msg"></div>
<h4 id='loading' style="display:none;"><img src="{{ url_for('static', filename='img/loader.gif') }}"/> Loading..</h4>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#username").on('input', function(e) {
$('#msg').hide();
$('#loading').show();
if ($('#username').val() == null || $('#username').val() == "") {
$('#msg').show();
$("#msg").html("Username is required field.").css("color", "red");
} else {
$.ajax({
type: "POST",
url: "/user_check",
data: $('#signupform').serialize(),
dataType: "html",
cache: false,
success: function(msg) {
$('#msg').show();
$('#loading').hide();
$("#msg").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
$('#msg').show();
$('#loading').hide();
$("#msg").html(textStatus + " " + errorThrown);
}
});
}
});
});
</script>
<style>
body {font-size:16px;}
#msg {font-weight:bold;padding:10px;}
.error { color: red;}
.form-control {
display: block;
width:300px;
height: 25px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
</style>
</body>
</html>
