Question

我正在使用JQuery并在复选框按钮上添加事件侦听器。我想根据是否选中复选框将不同的请求发送到服务器。当我进行控制台操作时，一切似乎都还可以，但是当我添加window.location.assign时，它无法正常工作。

这是我的代码：

<input class="form-check-input" type="checkbox" value="" id="isPageNoSorted">

<script>
    $('#isPageNoSorted').change(function() {
        isPageNoSorted = !isPageNoSorted

        $.get('/bookShow/' + isPageNoSorted  + '/' + <%= currentPage%> ).done(function(data) {
            console.log('/bookShow/' + isPageNoSorted  + '/' + <%= currentPage%>)
            //window.location.assign('/bookShow/' + isPageNoSorted  + '/' + <%= currentPage%>)
        })
    })
</script>

我的服务器代码：

router.get('/bookShow/:isPageNoSorted/:page', (req, res) => {
    var isPageNoSorted = req.params.isPageNoSorted;
    var page = req.params.page || 1;
    var perPage = 5;
    if (isPageNoSorted == "true") {
        bookModel.find({
                isDeleted: false
            }).sort('-pageCount')
            .skip((perPage * page) - perPage)
            .limit(perPage)
            .exec((err, data) => {
                if (data) {
                    if (data.length > 0) {
                        bookModel.find({
                            isDeleted: false
                        }).count().exec((err, count) => {
                            res.render(
                                'main/bookShow', {
                                    books: data,
                                    pages: Math.ceil(count / perPage),
                                    currentPage: page,
                                    isPageNoSorted: isPageNoSorted
                                }
                            );
                        })
                    } else {
                        res.send("Not enough data! Hajiiii :))")
                    }
                } else if (err) {
                    console.log(err)
                }
            })
    } else {
        bookModel.find({
                isDeleted: false
            }).sort('-createdAt')
            .skip((perPage * page) - perPage)
            .limit(perPage)
            .exec((err, data) => {
                if (data) {
                    if (data.length > 0) {
                        bookModel.find({
                            isDeleted: false
                        }).count().exec((err, count) => {
                            res.render(
                                'main/bookShow', {
                                    books: data,
                                    pages: Math.ceil(count / perPage),
                                    currentPage: page,
                                    isPageNoSorted: isPageNoSorted
                                }
                            );
                        })
                    } else {
                        res.send("Not enough data! Hajiiii :))")
                    }
                } else if (err) {
                    console.log(err)
                }
            })
    }
});

取消注释window.location console.log后的

不再记录任何内容。该请求被发送到相同的URL，并且页面刚刚刷新。

注意，我尝试了另一种方法来处理此问题。解决方法如下：

$('#isPageNoSorted').change(function () {
            isPageNoSorted = !isPageNoSorted
            $.get('/bookShow/' + isPageNoSorted  + '/' + <%= currentPage%> ).done(function(data) {
                $('html').html(data.replace(/<html>(.*)<\/html>/, "$1"));
            })
        })

但是我面临着一个新错误：

无法读取null的属性'appendChild'

我真的很茫茫，期待看到一个好的解决方案。

Answer 1

assign的语法如下：

location.assign("https://www.w3schools.com");

您需要传递完整的网址。另一件事是您不需要使用$ get请求。如下所示修改您的代码，它将像超级按钮一样工作。

<input class="form-check-input" type="checkbox" value="" id="isPageNoSorted">

<script>
    $('#isPageNoSorted').change(function() {
        isPageNoSorted = !isPageNoSorted

         $.get('/bookShow/' + isPageNoSorted  + '/' + <%= currentPage%> ).done(function(data) {
        console.log(data);
        //process the data and convert to html formatand replace with old one.
    }) 
        
    })
</script>

请确保将http://www.example.com替换为您的网址。

jQuery window.location不起作用

1 个答案: