python - 如何通过 AJAX 将服务器端的 mySQL 数据显示为 HTML

Question

我找不到很多这方面的教程，大多数可以找到 PHP 的教程。我正在尝试使用 python Flask、mySQL 和 Ajax 创建一个具有自动完成功能的搜索栏。我开始捕获击键并从数据库中进行选择。之后，我无法在客户端显示任何内容。

我尝试过使用部分页面，但这些都不会显示。

server.py 文件

@app.route("/search", methods=['POST'])
def search():
    output = ''
    mysql = connectToMySQL("countries_db")

    data_received = json.loads(request.data)
    data = data_received['query']

    var_data = '%' + data + '%'

    mysqlQuery = "SELECT name FROM countries WHERE countries.name LIKE '%s' LIMIT 10;" %var_data


    result =  mysql.query_db(mysqlQuery)


    output += '<ul class="list-unstyled">'

    if len(result) > 0:
        for country in result:
            output += '<li>' + country["name"] + '</li>' 

    else:
        output += '<li>Country Not Found</li>'

    output += '</ul>'

    return render_template("index.html", result=result)

index.html

<li class="search">
                            <div class="auto">
                                <img src="{{ url_for('static', filename='search.png') }}">
                                <input class="search-bar" type="text" id="country" name="country" aria-label="Search through site content"
                                    placeholder="Search for a Country">
                                <div class="countryList">
                                    {% for country in result %}
                                        <p>{{country.name}}</p>
                                    {% endfor %}
                                </div>
                            </div>
                        </li>

# Ajax                

<script type="text/javascript">
            $(document).ready(function () {
                $('#country').keyup(function () {
                    var query = $(this).val();
                    if (query != '') {
                        $.ajax({
                            url: "/search",
                            method: "POST",
                            data: JSON.stringify({
                                query: query,
                            }),
                            dataType: "JSON",
                            contentType: 'application/json;charset=UTF-8',
                            success: function (data) {
                                data = data.data
                                $('#countryList').fadeIn();
                                $('#countryList').html(data)

                            },
                            dataType: 'text'
                        })
                    }
                })

            })

Answer 1

id 使用 # 引用，类名使用 引用。在 Jquery 中。将国家/地区列表前的 # 替换为“.”