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

Question

伙计们。我正在使用 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);
    }
}

谢谢

标签： javascriptjquerypostpagination