article

Tuesday, February 18, 2020

Python Flask jQuery Ajax POST and insert data to Mysql


Python Flask jQuery Ajax POST and insert data to Mysql

 
#app.py
from flask import Flask, render_template, url_for, request, json, jsonify
from flaskext.mysql import MySQL
import pymysql

app = Flask(__name__)
 
mysql = MySQL()
 
# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'root'
app.config['MYSQL_DATABASE_PASSWORD'] = ''
app.config['MYSQL_DATABASE_DB'] = 'testingdb'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)

@app.route("/")
def hello():
    return "Welcome to Python Flask!"

@app.route('/signUp')
def index():
	return render_template('signUp.html')

@app.route('/process', methods=['POST'])
def process():
	# connect
    conn = mysql.connect()
    cursor = conn.cursor(pymysql.cursors.DictCursor)
    msg = ''
    username = request.form['username']
    password = request.form['password']
    name = request.form['name']
    email = request.form['email']

    if name and email and username and password:
        cursor.execute('INSERT INTO accounts VALUES (NULL, %s, %s, %s, %s)', (name, username, password, email)) 
        conn.commit()
        msg = 'You have successfully registered!'
        return jsonify({'name' : msg})

    return jsonify({'error' : 'Missing data!'})
	
if __name__ == '__main__':
	app.run(debug=True)
//signUp.html

 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Python Flask jQuery Ajax POST and insert data to Mysql </title>
	 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('form').on('submit', function(event) {
		$('#loading').show();
		$.ajax({
			data : {
				name : $('#fullname').val(),
				username : $('#username').val(),
				password : $('#password').val(),
				email : $('#txtmail').val()
			},
			type : 'POST',
			url : '/process'
		})
		.done(function(data) {
			if (data.error) {
				$('#errorAlert').text(data.error).show();
				$('#successAlert').hide();
				$('#loading').hide();
			}
			else {
				$('#successAlert').text(data.name).show();
				$('#errorAlert').hide();
				$('#loading').hide();
			}

		});
		event.preventDefault();
	});
});
</script>
</head>
 <body>
      <div class="container">
		<p><h1>Python Flask jQuery Ajax POST and insert data to Mysql</h1></p>
		<div class="col-md-4 col-md-offset-4" id="login">
			<section id="inner-wrapper" class="login">
							<article>
								<form class="form-signin">
								<h2 class="form-signin-heading">Please Sign Up </h2>
									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon"><i class="fa fa-user"> </i></span>
											<input type="text" class="form-control" name="fullname" id="fullname" placeholder="Your Name" required autofocus>
										</div>
									</div>
									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon"><i class="fa fa-user"> </i></span>
											<input type="text" class="form-control" name="username" id="username" placeholder="Your Username" required>
										</div>
									</div>
									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon"><i class="fa fa-envelope"> </i></span>
											<input type="email" class="form-control" name="txtmail" id="txtmail" placeholder="Email Address" required>
										</div>
									</div>
									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon"><i class="fa fa-key"> </i></span>
											<input type="password" class="form-control" name="password" id="password" class="form-control" placeholder="Password" required>
										</div>
									</div>
									  <button type="submit" class="btn btn-success btn-block">Register</button>
								</form>
								<br/>
				<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
				<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
				<h4 id='loading' style="display:none;"><img src="{{ url_for('static', filename='img/loader.gif') }}"/> Loading..</h4>
				
				
							</article>
			</section>			
		</div>				
</div>		
<style>
body {
    background:#333;
}
h1 {color:#fff;}
#login {
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	margin-top:50px;
	margin-left:30%;
}
.login {
	font-family: 'Josefin Sans', sans-serif;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
	-webkit-transform: rotateY(40deg);
	-moz-transform: rotateY(40deg);
	transform: rotateY(40deg);
}
.login:hover {
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	transform: rotate(0);
}
.login .form-group {
	margin-bottom:17px;
}
.login .form-control,
.login .btn {
	border-radius:0;
}
.login .btn {
	text-transform:uppercase;
	letter-spacing:3px;
}
.input-group-addon {
	border-radius:0;
	color:#fff;
	background:#f3aa0c;
	border:#f3aa0c;
}
.forgot {
	font-size:16px;
}
.forgot a {
	color:#333;
}
.forgot a:hover {
	color:#5cb85c;
}

#inner-wrapper, #contact-us .contact-form, #contact-us .our-address {
    color: #1d1d1d;
    font-size: 19px;
    line-height: 1.7em;
    font-weight: 300;
    padding: 50px;
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 100px;
}
.input-group-addon {
    border-radius: 0;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    color: #fff;
    background: #f3aa0c;
    border: #f3aa0c;
        border-right-color: rgb(243, 170, 12);
        border-right-style: none;
        border-right-width: medium;
}
</style>				
 </body>
 </html>
 

Related Post