Блог

Главная - Вопросы по программированию - Как обновить таблицу после нажатия кнопки в вызове ajax

Как обновить таблицу после нажатия кнопки в вызове ajax

#javascript #jquery #ajax #api

#javascript #jquery #ajax #API

Вопрос:

Я создаю скрипт, который извлекает данные из api. все прошло успешно, но когда я захотел ввести другое название фильма, оно не захотело обновлять существующие данные, а добавило новые данные к предыдущим данным.

 function loadContent() {
        let $ = jQuery;
        let id = $('#titless').val();
        var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52amp;language=en-USamp;query="   id   "amp;page=1amp;include_adult=false";
        fetch(url)
            .then(res => res.json())
            .then(data => {
                $.each(data.results, function(i, item) {
                    $('#atas').each(function() {
                        $('<div />', {
                            'class': 'col-md-2 my-2 mx-2 align-center',
                            'id': 'yaa',
                            'style': 'border: solid;',
                            // 'html' : ``,
                            'html': [
                                `<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
                                <h3 class="title">${data.results[i].title}</h3>
                                <h1 class="title">${data.results[i].id}</h1>
                                `
                            ],
                            appendTo: this
                        })
                    });
                });
            });
    }

это мой html-скрипт

 <div class="container">
    <h1 class="mt-4">Punten</h1>
    <div class="row">
        <div class="col bg-dark">
            <div class="row">
                <div class="col my-4 d-flex justify-content-container">
                    <input type="text" class="form-control" id="titless">
                    <button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card">
                    <div id="atas" class="card-body row">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Комментарии:

1. Я всегда волнуюсь , когда вижу подобный код $('#atas').each( . $('#atas') должен возвращать один элемент, поскольку идентификаторы должны быть уникальными для документа, поэтому вызов each результата указывает на неправильное понимание этого. Поскольку вы также находитесь внутри each of data.results и добавляете a div , для которого вы устанавливаете статический идентификатор, это кажется оправданным. Возможно, именно поэтому ваш код не обновляется.

Ответ №1:

Вам просто нужно очистить предыдущее содержимое с помощью empty

Кроме того, вам не нужен each метод #atas , поскольку это уникальный элемент, просто добавьте свои новые элементы следующим образом: $('#atas').append(newElement); 

 function loadContent() {
        let $ = jQuery;
        let id = $('#titless').val();
        var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52amp;language=en-USamp;query="   id   "amp;page=1amp;include_adult=false";
        fetch(url)
            .then(res => res.json())
            .then(data => {
                /* SOLUTION */
                $('#atas').empty();
                $.each(data.results, function(i, item) {
                    $('#atas').append(
                        $('<div />', {
                            'class': 'col-md-2 my-2 mx-2 align-center',
                            'id': 'yaa',
                            'style': 'border: solid;',
                            // 'html' : ``,
                            'html': [
                                `<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
                                <h3 class="title">${data.results[i].title}</h3>
                                <h1 class="title">${data.results[i].id}</h1>
                                `
                            ]
                        })
                    );
                });
            });
    }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <h1 class="mt-4">Punten</h1>
    <div class="row">
        <div class="col bg-dark">
            <div class="row">
                <div class="col my-4 d-flex justify-content-container">
                    <input type="text" class="form-control" id="titless">
                    <button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card">
                    <div id="atas" class="card-body row">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>