如何将Jquery代码转换为纯JavaScript代码

时间:2020-05-08 23:10:36

标签: javascript jquery post pagination

伙计们。我正在使用PHP和Javascript创建分页(加载更多按钮)。但是,分页系统是站点上唯一使用Jquery的系统。它正在加载整个库,从而影响网站(SEO)的加载时间。

jquery中的代码:

$(document).ready(function(){
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 6;
        row = row + rowperpage;

        if(row <= allcount){
            $("#row").val(row);

            $.ajax({
                url: 'getData.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Carregando...");
                },
                success: function(response){
                    setTimeout(function() {
                        $(".post:last").after(response).show().fadeIn("slow");
                        var rowno = row + rowperpage;
                        if(rowno > allcount){
                            $(".load-more").prop('disabled', true);
                            $('.load-more').css("background","grey");
                        }else{
                            $(".load-more").text("Carregar Mais");
                        }
                    }, 2000);

                }
            });
        } }); });

我试图重新创建代码,但是它不起作用。根据Chrome错误标识符,代码没有问题。有人知道这是什么吗?

Javascript中的代码(显示内容,但与jquery的方式不同)

function myFunction(){
    var row = document.getElementById('row').value;
    var allcount = document.getElementById('all').value;
    var rowperpage = 6;
    rowSoma = row + rowperpage;

    if(rowSoma <= allcount){

        row = document.getElementById('row').value;

        var request = new XMLHttpRequest();
        request.open('POST', 'getData.php', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.onreadystatechange = function() {

            if (request.readyState == 4 && request.status == 200) {
                var data = request.response;
                console.log(data);
                document.getElementById("myElement").innerHTML = data;

            var rowno = row + rowperpage;
            if(rowno > allcount){
                document.getElementById("load-more").disabled = true;
            } else { }
            }
            };
          request.onerror = function() {
            // There was a connection error of some sort
          };
        request.send(rowSoma);
    }
}

谢谢

0 个答案:

没有答案