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

Question

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

感谢您的意见和建议：

这是我的 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中删除以下块

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

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

update sqlite database in python after the item from dropdown suggestions selected

python

json

typeahead.js

cs50