Unable to open the page even after getting a status as 200 in Flask WebApp

Question

I am currently building a webapp using flask, I have made the homepage in which you need to enter the phone number and password and this will take these credentials and send you an OTP on the provided phone number.

Ideally, it should open login.html on clicking the signup button after filling the credentials but it is not. even though it is able to AJAX call and send the phone number to @app.route('/verify', methods=['GET','POST']) but login.html is not rendering.

Python code - app.py

from flask import Flask, render_template, request, jsonify, redirect
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
from wtosmsm import sendPostRequest
from emailSend import sendMail
from flask_cors import CORS
from random import randint
import requests
import smtplib
import json

app = Flask(__name__)
CORS(app)

#making the routes for different pages
#home route
@app.route('/')
def home_page():
    return render_template('home.html')

@app.route('/verify', methods=['GET','POST'])
def verify():
    response = request.get_data()
    print response
    #Credentials for sending an OTP on mobile number
    # if response != '':
    #   URL = 'https://www.way2sms.com/api/v1/sendCampaign'
    #   mobile_number = response.split('"')[3]
    #   otp_number = randint(100000,999999)
    #   message = str(otp_number) + ' is your OTP for registering at Scorecard Tech'
    #   response = sendPostRequest(URL, 'YRN1XLE4BMNUQYX85JGVEK0KDBB97CQV', '687MS1NRF2HV470G', 'stage', mobile_number, 'active-sender-id', message)
    #   print('otp sent')

    print 'This is working'
    return render_template('login.html')

# @app.route('/login', methods=['GET','POST'])
# def login():
#   return render_template('login.html')

if __name__ == '__main__':
    app.run(debug=True)

home.html -

<!DOCTYPE html>
<html>
<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>ScoreTech</title>
    <link rel="stylesheet" type="text/css" href="../static/css/mainone.css">
</head>
<body>
    <div class="wrapper">
        <div class="signup_card">
            <h2>Sign Up</h2>
            <div class="signup_form">
                <form class="signup_form_inner">
                    <input class="user_info" id="user_credential" type="text" name="username" placeholder="Email id/mobile number"><!-- <span class="alert_info" id="email_span">invalid number</span> -->
                    <input class="user_info" id="user_password" type="password" name="password" placeholder="Password">
                    <!-- <span class="alert_info" id="password_span">invalid password</span> -->
                    <button type="button" style="background-color:green;color:white;width: 50%;height:30px;border:none;border-radius: 30px;display:block;margin: 0 auto;padding: 5px; font-size: 15px;" onclick="sendOTP()">Sign Up</button>
                </form>
            </div>

            <center>
                <p class="bottom_text">Already have an account?
                    <a href="#">Login</a>
                </p>
            </center>           
        </div>

        <img class="home_img" src="../static/images/school.jpg" alt="home_image">

        <script type="text/javascript" src="../static/js/main.js?11"></script>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </div>
</body>
</html>

main.js -

//Utility functions 
function testString(s) {
  if(s.length > 8){return true;}
  return false;
}

//basic functions 
function sendOTP(){
    var user_number   = $("#user_credential").val();
    var user_password = $("#user_password").val();
    if(testString(user_password)){
        $.ajax({
            url: "http://localhost:5000/verify",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({"message": user_number})
        }).done(function(data) {
            console.log(data);
        });
    }
    else{
        alert('Password not valid')
    }
}

Output on the terminal -

127.0.0.1 - - [20/May/2019 14:36:42] "GET / HTTP/1.1" 200 -
{"message":"9993776456"}
This is working
127.0.0.1 - - [20/May/2019 14:36:44] "POST /verify HTTP/1.1" 200 -

ASSILI Taher · Answer 1 · 2019-05-20T12:40:08.277

You can render the login.html file using Jquery load function.

Python code - app.py

from flask import jsonify
#...
@app.route('/verify', methods=['GET','POST'])
def verify():
    response = request.get_data()
    print response
    print 'This is working'

    rep = {"valid": 1}
    return jsonify(rep)

@app.route('/render-login')
def render_login_page():
    return render_template('login.html')
#...

main.js -

//basic functions 
function sendOTP(){
    var user_number   = $("#user_credential").val();
    var user_password = $("#user_password").val();
    if(testString(user_password)){
        $.ajax({
            url: "http://localhost:5000/verify",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({"message": user_number})
            success:function(response) {

                console.log(JSON.stringify(response))
                if(response['valid'] == 1) {
                    window.history.pushState("", "", '/render-login');
                    $("body").load('/render-login')
                }
        }).done(function(data) {
            console.log(data);
        });
    }
    else{
        alert('Password not valid')
    }
}

Edit: Another possible solution:

You can use $("body").html(response) to replace your current html file with the login.html file received from the server.

Python code - app.py

    #...    
    @app.route('/verify', methods=['GET','POST'])
    def verify():
        response = request.get_data()
        print response
        print 'This is working'

        return render_template('login.html')

    #...

main.js -

    //basic functions 
    function sendOTP(){
        var user_number   = $("#user_credential").val();
        var user_password = $("#user_password").val();
        if(testString(user_password)){
            $.ajax({
                url: "http://localhost:5000/verify",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({"message": user_number})
                success:function(response) {
                    /* if you did not want change the url in navigator,
                    uncomment window.history.pushState */
                    window.history.pushState("", "", '/render-login');
                    $("body").html(response)
            }).done(function(data) {
                console.log(data);
            });
        }
        else{
            alert('Password not valid')
        }
    }

can you elaborate what exactly additional success:function(response) is doing or do you know how it can be done in python way? — Abhishek Patel, May 20 '19 at 10:33
success:function(response) allow to read the response of the server after executing the verify() function. In this case, response = {"valid": 1} — ASSILI Taher, May 20 '19 at 12:22

Unable to open the page even after getting a status as 200 in Flask WebApp

1 Answers1