0

这是我的第一个 JavaScript 片段。我遇到了以下问题。我正在尝试使用 Django Rest Framework 数据加载序列化,然后呈现问题列表和分页栏。我也有likeQuestion,PaginationListenerSortingListener功能。

在下面的代码片段中,我在 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)
    })
}

4

0 回答 0