Question

我在这里有一段时间试图让它发挥作用。我很确定我已经完成了几乎所有可以尝试解决这个问题的研究，而我无法弄清楚我哪里出错了。所以，话虽如此，请提前感谢你们提供的任何帮助。

我首先发布我的代码：

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 %}

的Python：

# 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错了？不确定。

EDIT2：好的，所以我现在设法进入getJSON调用。谢谢你的帮助。但是现在我正处理我的问题的真实部分，在从SQL数据库中获取JSON后，我将如何格式化表格？据我所知，我的格式至少大部分都是正确的，但在删除旧表并插入新表时，我可能会遇到问题。

Answer 1

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

在输入属性上使用Javascript实时更新HTML表，并使用来自SQL数据库

1 个答案: