在选择下拉建议中的项目后更新 python 中的 sqlite 数据库

Question

从 js 中的下拉建议中选择项目后，我的程序必须更新python 中的表“idlist” 。用户选择该项目后，python 中的 POST 请求将其添加到“idlist”表中。当我运行程序时，我收到以下错误消息：

我很感激你的想法和建议：

这是我的python代码：

def search():

    """Search for books that match query"""

    if request.method == "GET":

        if not request.args.get("q"):

            return render_template("adjust.html")

        else:

            q = request.args.get("q")  + "%"

            books = db.execute("SELECT Title, Author FROM book WHERE Title LIKE :q OR Author LIKE :q", q=q)

        return jsonify(books)

    if request.method == "POST" and request.form.get("title"):

        Title = request.form.get("title")

        insert_book = db.execute("INSERT INTO idlist (id,Title1, Status) VALUES (:id, :Title1, :Status)", id=session["user_id"], Title1=Title, Status="Not started")

        return redirect("/")

    return render_template("adjust.html")

这是html：

{% extends "layout.html" %}

{% block title %}

    Add your Book

{% endblock %}

{% block main %}

    <form action="/adjust" method="POST">

        <div class="form-group">

        <p>Choose your Book</p>

        <label class="sr-only" for="q">Title, Author</label>

        <input class="form-control" id="q" placeholder="Title, Author" name="title" type="text" autocomplete="off" />

        </div>

        <button class="btn btn-primary" type="submit">Add</button>

    </form>

{% endblock %}

这是js：

function configure()

{

    // Configure typeahead

    $("#q").typeahead({

        highlight: false,

        minLength: 1

    },

    {

        display: function(suggestion) { return suggestion.Title; },

        limit: 10,

        source: search,

        templates: {

            suggestion: Handlebars.compile(

                "<div>"+

                "{{Title}}, {{Author}}" +

                "</div>"

            )

       }

    });

    // Give focus to text box

    $("#q").focus();

}

// Search database for typeahead's suggestions

function search(query, syncResults, asyncResults)

{

    // Get places matching query (asynchronously)

    let parameters = {

        q: query

    };

Answer 1

不要使用 Ajax 来添加新书它会让用户感到困惑，因为他不知道它是否被添加到了其中idlist，Form POST而是使用了。在script.js删除以下块$("#q").on('typeahead:selected', function a(eventObject, suggestion, name) {&nbsp; &nbsp; ...&nbsp; &nbsp; ...&nbsp;});并将所选项目添加到输入表单，替换display: function(suggestion) { return null; },和display: function(suggestion) { return suggestion.Title; },制作表单POST，adjust.html替换<form action="/adjust">&nbsp; &nbsp;....&nbsp; &nbsp;<input class="form-control" id="q" placeholder="Title, Author" type="text"/>和<form action="/addbook" method="POST">&nbsp; &nbsp; ....&nbsp; &nbsp; <input class="form-control" id="q" placeholder="Title, Author" name="title" type="text" autocomplete="off" />和addBook()方法@app.route("/addbook", methods=["GET", "POST"])def addbook():&nbsp; &nbsp; """Add selected book"""&nbsp; &nbsp; if request.method == "POST" and request.form.get("title"):&nbsp; &nbsp; &nbsp; &nbsp; Title = request.form.get("title")&nbsp; &nbsp; &nbsp; &nbsp; insert_book = db.execute("INSERT INTO idlist (id,Title1, Status) VALUES (:id, :Title1, :Status)", id=session["user_id"], Title1=Title, Status="Not started")&nbsp; &nbsp; &nbsp; &nbsp; return redirect("/")&nbsp; &nbsp; # no "title" in the form, return to Add new book page&nbsp; &nbsp; return redirect("/adjust")