Question

我尝试创建便利贴应用程序。我陷入了尝试以JSON格式向Flask发送数据的部分，但当我打印网页发送的POST请求时，它显示None这是我的代码：

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

<body>

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

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





<script type="text/javascript">
    $(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
        })
    });

</script>



</body>

我做错了什么或有其他方法吗？我想过使用表单，但它需要很多jQuery，我不太熟悉，而且我没有多少时间可以为我留下较少的选项。这是我的Flask app主文件：

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)

Flask应用程序，jQuery使用JSON发送POST，但Flask似乎不理解网页发送的数据

0 个答案: