How to work with JSON object in flask

Question

I need to use JSON object in my registration and login form to check the data from the database using ajax.

There is my JSON object:

@app.route('/test', methods=['POST'])
def test():
users = User.query.all()
users_schema = UserSchema(many=True)
output = users_schema.dump(users).data
jsonobj = jsonify({'users': output})
return jsonobj

My registration form:

<!-- extend base layout -->
{% extends "base.html" %}
{% block content %}
<script src="{{ url_for('static', filename='js/form.js') }}"></script>
<div class="well">
    <h1>Sign Up</h1>
    <form action="" method="post" name="regform" onsubmit="return Validate()">
    <div id="username_div">
        {{ form.hidden_tag() }}
        {{ form.username.label }}
        {{ form.username }}
        <div id="name_error"></div>
    </div>
    <div id="email_div">
        {{ form.hidden_tag() }}
        {{ form.email.label }}
        {{ form.email }}
        <div id="email_error"></div>
    </div>
    <div id="password_div">
        {{ form.hidden_tag() }}
        {{ form.password.label }}
        {{ form.password }}
        <div id="password_error"></div>
    </div>
    <div id="pass_confirm_div">
        {{ form.hidden_tag() }}
        {{ form.password_confirm.label }}
        {{ form.password_confirm }}
        <div id="password_error"></div>
    </div>
    <div>
        <input type="submit" name="register" value="Register" class="btn">
    </div>
</form>
    <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>
</div>
<script src="{{ url_for('static', filename = 'js/regform_validator.js') }}"></script>
 {% endblock %}

How to use my JSON object with ajax? Or may be I can rewrite my regform_validator.js script?

// SELECTING ALL TEXT ELEMENTS
var username = document.forms['regform']['username'];
var email = document.forms['regform']['email'];
var password = document.forms['regform']['password'];
var password_confirm = document.forms['regform']['password_confirm'];
// SELECTING ALL ERROR DISPLAY ELEMENTS
var name_error = document.getElementById('name_error');
var email_error = document.getElementById('email_error');
var password_error = document.getElementById('password_error');
// SETTING ALL EVENT LISTENERS
username.addEventListener('blur', nameVerify, true);
email.addEventListener('blur', emailVerify, true);
password.addEventListener('blur', passwordVerify, true);
// validation function
function Validate() {
// validate username
if (username.value == "") {
username.style.border = "1px solid red";
document.getElementById('username_div').style.color = "red";
name_error.textContent = "Username is required";
username.focus();
return false;
}
// validate username
if (username.value.length < 3) {
username.style.border = "1px solid red";
document.getElementById('username_div').style.color = "red";
name_error.textContent = "Username must be at least 3 characters";
username.focus();
return false;
}
// validate email
if (email.value == "") {
email.style.border = "1px solid red";
document.getElementById('email_div').style.color = "red";
email_error.textContent = "Email is required";
email.focus();
return false;
}
// validate password
if (password.value == "") {
password.style.border = "1px solid red";
document.getElementById('password_div').style.color = "red";
password_confirm.style.border = "1px solid red";
password_error.textContent = "Password is required";
password.focus();
return false;
}
// validate password
if (password.value.length < 3) {
password.style.border = "1px solid red";
document.getElementById('password_div').style.color = "red";
password_confirm.style.border = "1px solid red";
password_error.textContent = "Password must be at least 3 characters";
password.focus();
return false;
}
// check if the two passwords match
if (password.value != password_confirm.value) {
password.style.border = "1px solid red";
document.getElementById('pass_confirm_div').style.color = "red";
password_confirm.style.border = "1px solid red";
password_error.innerHTML = "The two passwords do not match";
return false;
}
}
// event handler functions
function nameVerify() {
if (username.value != "") {
username.style.border = "1px solid #5e6e66";
document.getElementById('username_div').style.color = "#5e6e66";
name_error.innerHTML = "";
return true;
}
}
function emailVerify() {
if (email.value != "") {
email.style.border = "1px solid #5e6e66";
document.getElementById('email_div').style.color = "#5e6e66";
email_error.innerHTML = "";
return true;
}
}
function passwordVerify() {
if (password.value != "") {
password.style.border = "1px solid #5e6e66";
document.getElementById('pass_confirm_div').style.color = "#5e6e66";
document.getElementById('password_div').style.color = "#5e6e66";
password_error.innerHTML = "";
return true;
}
if (password.value === password_confirm.value) {
password.style.border = "1px solid #5e6e66";
document.getElementById('pass_confirm_div').style.color = "#5e6e66";
password_error.innerHTML = "";
return true;
}
}

My JSON object looks like:

{
"users": [
{
  "about_me": null,
  "email": "zurgs@bk.ru",
  "followed": [],
  "followers": [],
  "id": 1,
  "last_seen": "2018-01-06T11:34:20.021696+00:00",
  "password": "pbkdf2:sha256:50000$bRcLhY9k$f26dad7b850c8b99b21f4b65f8719294417f37bf648bb12bcf6be8977b6341f1",
  "posts": [],
  "role": "user",
  "username": "ZuRGs"
},
{
  "about_me": null,
  "email": "polina@bk.ru",
  "followed": [],
  "followers": [],
  "id": 2,
  "last_seen": "2018-01-05T18:52:01.895612+00:00",
  "password": "pbkdf2:sha256:50000$em5pCjoZ$ed9bba487cce0c755eccf1575ed9b777d15708c64669193ac078331da8b65edc",
  "posts": [],
  "role": "user",
  "username": "Polina"
}
]
}

This JSON object is my database and I need to check usernames in it using ajax.

jwebb · Answer 1 · 2018-01-06T21:56:14.483

A typical AJAX POST request in Flask looks like this:

JavaScript:

var xhr = new XMLHttpRequest();
var JSON_sent = {"your": "JSON"};
xhr.open('POST', '/ajax-route');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function (e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var JSON_received = JSON.parse(xhr.responseText);
        //handle received JSON here
    } else {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify(JSON_sent));

Flask:

from flask import jsonify, request


@app.route('/ajax-route', methods=['POST'])
def ajax_route():
    try:
        JSON_sent = request.get_json()
        print(JSON_sent)
        # handle your JSON_sent here
        # Pass JSON_received to the frontend
        return jsonify(JSON_received)
    except Exception as e:
        print("AJAX excepted " + str(e))
        return str(e)

There are lots of examples using jQuery, but you seem to be using vanilla JS, so that's the answer I provided.

https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xv-ajax

http://flask.pocoo.org/docs/0.12/patterns/jquery/

EDIT using the code provided now that I understand the intention better:

JavaScript:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/test');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function (e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonobj = JSON.parse(xhr.responseText);
        //handle received JSON here
    } else {
        console.log(xhr.responseText);
    }
};
xhr.send();

Flask:

@app.route('/test', methods=['POST'])
def test():
    try:
        users = User.query.all()
        users_schema = UserSchema(many=True)
        output = users_schema.dump(users).data
        jsonobj = jsonify(users=output)
        return jsonobj
    except Exception as e:
        print("AJAX excepted " + str(e))
        return str(e)

Also if you're not sending anything, a GET request instead of POST should be fine.

Perhaps those weren't the best sample names. When you look at the JS, JSON_sent is what is sent to Flask and JSON_received is what the frontend (AJAX) receives from the server (Flask). I couldn't tell if you were trying to send a JSON object or receive one or both. — jwebb, Jan 06 '18 at 21:06
So, can I write anything in variable JSON_sent (in JS code)? Because, I don't have anything at first. — Zurgs Rushmber, Jan 06 '18 at 21:15
When I try to print variable JSON_sent in flask console I receive None, why? I use only your code (without my additions) — Zurgs Rushmber, Jan 06 '18 at 21:39
OK I thought you were sending an object because you're using the POST method. I edited my answer to clarify. You can just send nothing. — jwebb, Jan 06 '18 at 21:57

score 0 · Accepted Answer · answered Jan 06 '18 at 23:35

Thanks a lot for jwebb, but doesn't work for me :( There is some code in my template that is works for me:

<button onclick="loadJSON()">Show usernames in database</button>
<script>
    function loadJSON() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/test', false);
        xhr.send();
        if (xhr.status != 200) {
        // обработать ошибку
            alert('Ошибка ' + xhr.status + ': ' + xhr.statusText);
        } else {
        // вывести результат
            var jsonobj = JSON.parse(xhr.responseText, function(key, value) {
            if (key == 'username')
                alert(value);
            });
        }
    }
</script>

And there is my flask code: (I'm using flask-marshmallow)

@app.route('/test', methods=['GET'])
def test():
    try:
        users = User.query.all()
        users_schema = UserSchema(many=True)
        output = users_schema.dump(users).data
        return jsonify({'users': output})
    except Exception as e:
       print('AJAX excepted ' + str(e))
       return str(e)

Yes, so basically similar but customized for your template. Glad you made it work for you, cheers! — jwebb, Jan 07 '18 at 01:44

How to work with JSON object in flask

2 Answers2

Linked