这是我的第一个 JavaScript 片段。我遇到了以下问题。我正在尝试使用 Django Rest Framework 数据加载序列化,然后呈现问题列表和分页栏。我也有likeQuestion
,PaginationListener
和SortingListener
功能。
在下面的代码片段中,我在 fetch 函数中执行 likeQuestion、PaginationListener 和 SortingListener 函数。它可以工作,但由于它是递归的,因此每次点击都会导致多个 http 请求加倍(实际上只有 SortingListener 函数会以这种方式运行,PaginationListener - 令人惊讶的是不会)。
我还尝试从 fetch 函数中执行所有三个函数。它不起作用:当我尝试获取元素时,html 集合的长度为零。我试过了window.addEventListener('DOMContentLoaded', (e) => {})
。还是不行。
在 fetch 函数之外,它仅适用于setTimeout
. 但在这种情况下,PaginationListener 仅适用于第一次点击。而且超时似乎不是一个很好的决定。
我应该如何更改我的代码以使其顺利运行?
const url = document.getElementById('question-list').dataset.url
getQuestionList(url)
// Ask.index page loading
function getQuestionList(url) {
const questionList = document.getElementById('question-list')
fetch(url).then(response => response.json()).then(json => {
// Questions List loading
questionList.innerHTML = ''
for(const question of json.results){
date = new Date(question.date)
const el = document.createElement('div')
el.classList.add('row', 'justify-content-center', 'my-3')
el.innerHTML = '<div>Question HTML</div>'
const likeButton = el.querySelector('.like-btn')
if(question.like){
likeButton.classList.add('active')
}
questionList.appendChild(el)
}
// Pagination Links loading
const pagination = document.getElementById('pagination')
pagination.innerHTML = ''
if (json.links.first){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.first + '">Первая</a></li>'
} else {
pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Первая</a></li>'
}
if (json.links.second_previous){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_previous + '">' + (json.current - 2) + '</a></li>'
}
if (json.links.previous){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.previous + '">' + (json.current - 1) + '</a></li>'
}
pagination.innerHTML += '<li class="page-item active"><span class="page-link bg-primary">' + json.current + '</span></li>'
if (json.links.next){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.next + '">' + (json.current + 1) + '</a></li>'
}
if (json.links.second_next){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_next + '">' + (json.current + 2) + '</a></li>'
}
if (json.links.last){
pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.last + '">Последняя</a></li>'
} else {
pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Последняя</a></li>'
}
likeQuestion()
PaginationListener()
SortingListener()
})
}
function likeQuestion() {
const button = document.getElementsByClassName('like-btn')
Array.from(button).forEach(element => {
element.addEventListener('click', () => {
const url = element.dataset.url
const request = new XMLHttpRequest()
request.responseType = 'json'
request.open('GET', url)
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
request.send()
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
if (this.response.auth) {
window.location = this.response.auth
} else {
element.querySelector('.like_count').textContent = this.response.like_count
if (this.response.add) {
element.classList.add('active')
} else {
element.classList.remove('active')
}
}
} else {
console.log('Did not get anything')
}
}
request.onerror = function () {
console.log('Connection error');
}
})
})
}
function PaginationListener() {
const pagesLinks = document.getElementsByClassName('page-link')
Array.from(pagesLinks).forEach(element => {
element.addEventListener('click', (event) => {
const url = element.getAttribute('href')
if (url) {
getQuestionList(url)
window.scrollTo({top: 0, behavior: 'smooth'})
}
event.preventDefault()
}, false)
})
}
function SortingListener(){
const questionList = document.getElementById('question-list')
const sortingField = document.getElementById('id_order_by')
sortingField.addEventListener('change', (event)=>{
const url = questionList.dataset.url + '?order_by=' + event.target.value
getQuestionList(url)
})
}