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

问题描述

我的程序必须更新表 idlist 。用户选择项目，在python中的POST请求将其添加到 idlist表中。
运行程序时，出现以下错误消息：

My program must update table "idlist" in python after the item was selected from drop down suggestions in js. User selects the item, after that POST request in python adds it to the "idlist" table.As I run the program I get the following error message:

我感谢您的想法和建议：

I am grateful for your ideas and suggestions:

这是我的python代码：

Here is my python code:

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();
});

推荐答案

不要使用Ajax添加新书使用户感到困惑，因为他不知道是否将其添加到 idlist 中，请使用 Form POST 。

Don't use Ajax to Add new book it will make user confused because he don't know if it was added to the idlist or not, use the Form POST instead.

script.js 删除以下块

$("#q").on('typeahead:selected', function a(eventObject, suggestion, name) {
    ...
    ...
 });

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

and to add selected item to the input form, replace

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

with

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

在 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数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！