javascript - 在输入属性更改时使用Javascript使用SQL数据库中的数据实时更新HTML表

我在这里度过了难忘的时光，试图使它正常工作。我敢肯定，我已经完成了几乎所有可以解决这个问题的研究，而且我无法弄清楚哪里出了问题。话虽如此，在此先感谢您提供的任何帮助。

我将从发布代码开始：

HTML：

{% block main %}
    <form action="{{ url_for('index') }}" method="post">
        <fieldset>
            <div id ="total" class="form-inline">
                <div id="itemBackground" class="col-sm-6">
                    <div id="itemToolBar" class="row">
                        <div class="col-sm-6">
                            <label>
                                Show:
                                <select name="list_length" class="form-control input-sm">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </label>

                        </div>
                        <div class="col-sm-6" align="right">
                            <label>
                                Search:
                                <input class="form-control input-sm" autocomplete="off" type="textbox" name="q" id="q" placeholder="">
                            </label>
                        </div>
                    </div>

                    <table id="itemTable" name="itemTable" class="table table-hover table-inverse">
                        <thead>
                            <tr id="head">
                                <th>ID</th>
                                <th>Item</th>
                                <th>Buy</th>
                                <th>Sell</th>
                            </tr>
                        </thead>
                        {% for item in items %}
                            <tr id="rows">
                                <td scope="row">{{ item[0] }}</td>
                                <td>{{ item[1] }}</td>
                                <td>{{ item[2] }}</td>
                                <td>{{ item[3] }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>

                <div id = "vehicleBackground" class="col-sm-6">
                    <table id="vehicleTable" class="table table-hover table-inverse">
                        <thead>
                            <tr id="head">
                                <th>ID</th>
                                <th>Item</th>
                                <th>Buy</th>
                            </tr>
                        </thead>
                        {% for vehicle in vehicles %}
                            <tr id="rows">
                                <th scope="row">{{ vehicle[0] }}</th>
                                <td>{{ vehicle[1] }}</td>
                                <td>{{ vehicle[2] }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>


        </fieldset>
    </form>
{% endblock %}

蟒蛇：

# configure application
app = Flask(__name__)

# ensure responses aren't cached
if app.config["DEBUG"]:
    @app.after_request
    def after_request(response):
        response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
        response.headers["Expires"] = 0
        response.headers["Pragma"] = "no-cache"
        return response


# configure session to use filesystem (instead of signed cookies)
app.config["SESSION_FILE_DIR"] = gettempdir()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        if not request.form.get("q"):
            return print("Give me a search query")
        else:
            q = request.form.get("q") + "%"
            print(q)

            conn = sqlite3.connect('items.db')
            db = conn.cursor()

            db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q))
            itemList = db.fetchall()

            db.execute("SELECT * FROM vehicles")
            vehicleList = db.fetchall()

            db.close()
            conn.close()


            return render_template("index.html", items = itemList, vehicles = vehicleList)

    # else if user reached route via GET (as by clicking a link or via redirect)
    else:

        # configure CS50 Library to use SQLite database
        conn = sqlite3.connect('items.db')
        db = conn.cursor()

        db.execute("SELECT * FROM items")
        itemList = db.fetchall()

        db.execute("SELECT * FROM vehicles")
        vehicleList = db.fetchall()

        db.close()
        conn.close()

        return render_template("index.html", items = itemList, vehicles = vehicleList)

@app.route("/search")
def search():
    """Search for places that match query."""
    print("here")
    # TODO
    q = request.args.get("q") + "%"

    items = db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q))

    return jsonify(items)

Javascript：

// execute when the DOM is fully loaded
$( document ).ready(function() {
    configure();
});

/**
 * Configures application.
 */
function configure()
{
    // configure typeahead
    $("#q").on('input propertychange paste', function() {
        //$("#q").val("hi");

        // get items matching query (asynchronously)
        var table = "<thead><tr><th>ID</th><th>Item</th><th>Buy</th><th>Sell</th></tr></thead><tr>";

        var parameters = {
            q: $("q").val()
        };

        $.getJSON(Flask.url_for("search"), parameters)
        .done(function(data) {
            $('#q').val("hi");
            for (var i=0; i<data.length; i++) {
                obj = data[i];
                for (var key in obj) {
                    table += "<td>" + key + "</td>";
                }
            }
            table += "</tr>";

            $("#itemTable").replaceWith(table);
            //document.getElementById('').innerHTML = table;
        })
        .fail(function() {
            // log error to browser's console
            console.log(errorThrown.toString());
        });
    });

    // give focus to text box
    $("#q").focus();
}

当我检查要更改的文本框输入并因此尝试使用与数据库查询相匹配的数据来更新表时，我会被javascript所卡住。实际上，我确实将其放入“输入属性更改粘贴”部分，因为我将其设置为在每次在框中键入任何内容时将文本框值更改为“ hi”，但是我从不尝试通过下一部分进行操作从我的/ search python函数中获取getJson，然后将其格式化为表格，然后将旧表格替换为我刚刚创建的表格。

我不确定我能为您提供更多的信息，但是我确定我缺少您需要的一些信息。所以，让我知道你是否愿意。预先再次感谢您的帮助！

编辑：
我应该补充一点，我的代码永远都不会进入该getJSON块。如您所见，我尝试在getJSON调用中更改输入文本框的值，但该文本框从未更新为“ hi”。似乎我可能会错误地调用getJSON？不确定。

编辑2：
好的，所以我确实设法进入了getJSON调用。谢谢您的帮助。但是，现在我要问的问题的实质是，从SQL数据库获取JSON后如何格式化表格？据我所知，我的格式化至少在大多数情况下是正确的，但是在删除旧表并插入新表时可能会遇到问题。

最佳答案

选择器#itemTable在HTML中不匹配。 <table>元素name属性值为"itemTable";元素在HTML上未设置id。使用$("table[name=itemTable]")或在HTML上将id设置为"itemTable"以便能够使用#itemTable选择器并匹配现有的<table>元素。