Flask app, jQuery sends a POST with JSON but Flask doesn't seem to understand the data sent by the webpage
<p>I trying to create a sticky notes app. I'm stuck at a part where I try to send data in JSON format to Flask but when I print the POST request sent by the web page it it shows <code>None</code> Here is my code:</p>

<p>
</p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Ajax Notes&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="input_form"&gt;
    &lt;h2&gt;Add a note&lt;/h2&gt;
    &lt;form id="add_note" action="/add" method="post"&gt;
        &lt;input id="input_title" type="text" name="input_title" style="width: 250px;" placeholder="Title"&gt;
        &lt;input id="input_note" type="text" name="input_note" style="width: 250px; height:200px;" placeholder="Note"&gt;
        &lt;input id="submit_note" type="submit" value="Add Note"&gt;
    &lt;/form&gt;
&lt;/div&gt;

{% for note in all_notes %}
    &lt;div id='note'&gt;
        &lt;form id="delete_note" action="/delete" method="post"&gt;
            &lt;input type="hidden" name="delete_note_id" value="{{ note['id'] }}"&gt;
            &lt;input id="delete_button" type="submit" name="delete" value="X"&gt;
        &lt;/form&gt;
        &lt;form id="edit_form" action='' method="post"&gt;
            &lt;h4 id="note_id" name="id" hidden&gt;{{ note['id'] }}&lt;/h4&gt;
            &lt;h3 contenteditable="true" name="note_title" id="note_title"&gt;{{ note['title'] }}&lt;/h3&gt;&lt;br&gt;&lt;br&gt;
            &lt;p contenteditable="true" name="note_note" id="note_note"&gt;{{ note['note'] }}&lt;/p&gt;
        &lt;/form&gt;
    &lt;/div&gt;
{% endfor %}





&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
            $(this).on('click','#note', function(){
                    var $changes = {
                    id : $('h4', this).text().trim(),
                    title : $('h3', this).text().trim(),
                    note : $('p', this).text().trim()
                };

                // console.log($("#edit_form").serialize())
                // console.log(JSON.stringify($changes))
                $.post('/edit', JSON.stringify($changes), function(res){console.log(res)}, 'json' );

                return false
        })
    });

&lt;/script&gt;



&lt;/body&gt;
</code></pre>

<p></p>

<p>What am I doing wrong or is there any other approach to this? I thought about using forms but it required a lot of jQuery which am not very familiar with and I have very less time left leaving lesser options for me.
Here is my Flask app main file:</p>

<pre><code>from flask import Flask, request, session, render_template, redirect
from mysqlconnection import MySQLConnector

app = Flask(__name__)
app.secret_key = "the biggest secret!"
mysql = MySQLConnector(app, 'notes')


def add_note(title, note):
    query = "INSERT INTO notes (title, note) VALUES(:title, :note)"
    data = {
        'title' : title,
        'note' : note
    }
    mysql.query_db(query, data)


def edit_note(id, title, note):
    query = "UPDATE notes SET title = :title, note = :note WHERE id = :id"
    data = {
        'id' : id,
        'title' : title,
        'note' : note
    }
    mysql.query_db(query, data)

def delete_note(id):
    query = "DELETE FROM notes WHERE id = :id"
    data = {
        'id' : id
    }
    mysql.query_db(query, data)


def all_notes():
    query = "SELECT * FROM notes"
    return mysql.query_db(query)


@app.route('/')
def index():
    notes = all_notes()
    return render_template('index.html', all_notes=notes)


@app.route('/add', methods=['POST'])
def add():
    title = request.form['input_title']
    note = request.form['input_note']
    add_note(title, note)
    return redirect('/')

@app.route('/delete', methods=['POST'])
def delete():
    note_id = int(request.form['delete_note_id'])
    delete_note(note_id)
    return redirect('/')


@app.route('/edit', methods=['POST'])
def edit():
    print request.json
    # note_id = request.form['edit_note_id']
    # title = request.form['edit_title']
    # note = request.form['edit_note']
    # edit_note(note_id, title, note)
    return redirect('/')



if __name__ == "__main__":
    app.run(debug=True)
</code></pre>