Javascript 如何在ajax调用中单击按钮后刷新表

我正在创建一个从api检索数据的脚本。一切都很成功，但当我想输入另一个电影标题时，它不想刷新现有数据，而是在以前的数据中添加了新数据

function loadContent() {
        let $ = jQuery;
        let id = $('#titless').val();
        var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=" + id + "&page=1&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
                        })
                    });
                });
            });
    }

函数loadContent（）{
设$=jQuery；
设id=$（'#titless'）.val（）；
变量url=”https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=“+id+”&page=1&include\u成人=false”；
获取（url）
.then（res=>res.json（））
。然后（数据=>{
$.each（data.results，function（i，item）{
$（'#atas'）。每个（函数（）{
$('', {
“类别”：“col-md-2 my-2 mx-2居中对齐”，
'id'：'yaa'，
“样式”：“边框：实心；”，
//'html'：``，
“html”：[
`
${data.results[i].title}
${data.results[i].id}
`
],
附件：这个
})
});
});
});
}

这是我的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>

朋腾
提交

您只需使用

另外，您不需要在

#atas

上使用

每个
方法，因为它是唯一的元素，只需像这样附加新元素：
$（'#atas'）。append（newElement）


函数loadContent（）{
设$=jQuery；
设id=$（'#titless'）.val（）；
变量url=”https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=“+id+”&page=1&include\u成人=false”；
获取（url）
.then（res=>res.json（））
。然后（数据=>{
/*解决方案*/
$（'#atas'）.empty（）；
$.each（data.results，function（i，item）{
$（'#atas'）。追加(
$('', {
“类别”：“col-md-2 my-2 mx-2居中对齐”，
'id'：'yaa'，
“样式”：“边框：实心；”，
//'html'：``，
“html”：[
`
${data.results[i].title}
${data.results[i].id}
`
]
})
);
});
});
}

朋腾
提交
当我看到像
$（'atas'）这样的代码时，我总是很担心。每个（
$（'atas'））
应该返回单个元素，因为ID必须是文档唯一的，因此对结果调用
每个
表示误解。因为您也在
每个
的
数据中。results
并添加设置静态ID的
div，这似乎是合理的。这也可能是您的代码无法刷新。