在选择下拉建议中的项目后更新 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 suggestionsfunction 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) {

    ...

    ...

 });

并将所选项目添加到输入表单，替换

display: function(suggestion) { return null; },

和

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

制作表单POST，adjust.html替换

<form action="/adjust">

   ....

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

和

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

    ....

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

和addBook()方法

@app.route("/addbook", methods=["GET", "POST"])

def addbook():

    """Add selected book"""

    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("/")

    # no "title" in the form, return to Add new book page

    return redirect("/adjust")