Как отобразить данные MySQL со стороны сервера в HTML из AJAX

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

идентификаторы присваиваются с помощью #, а имена классов указываются с использованием.в Jquery.Замените # перед списком стран на «.»