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

Question

我的程序必须更新表“idlist”从 js 中的下拉建议中选择项目后，在 python 中执行此操作。用户选择该项目，然后 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
    };
    $.getJSON("/adjust", parameters, function(data, textStatus, jqXHR) {

        // Call typeahead's callback with search results (Author Title)
        asyncResults(data);
    });
}

$(document).ready(function() {
   configure();
});

Answer 1

不要使用Ajax添加新书，这会让用户感到困惑，因为他不知道它是否已添加到idlist中，请使用Form POST 相反。

在 script.js 中删除以下 block

$("#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")