javascript - 尝试从 JavaScript 转换为 jquery

Question

目前，我将这个 ajax 语句与 javascript 结合起来运行外部文件并获取其数据，如下所示:

const ajaxRequest = new XMLHttpRequest();
const handleResponse = function() {
    //have we got a response from the server
    if (ajaxRequest.readyState === 4) {
        //did we find the requested resource?
        if (ajaxRequest.status === 200) {
            //  console.log(ajaxRequest.responseText); //testing file
            let data = JSON.parse(ajaxRequest.responseText)
            let ul1 = document.querySelectorAll('.ajax')[0];
            let ul2 = document.querySelectorAll('.ajaxCheck')[0];
            let ul3 = document.querySelectorAll('.ajaxCheck')[1];

            if (ul1) {
                ul1.innerHTML = displayOutput(data, false);
            } else {
                ul2.innerHTML = displayOutput(data, true);
                ul3.innerHTML = displayOutput(data, true);
            }
        }
    }
}
ajaxRequest.open('GET', 'data/games.json', true);

ajaxRequest.onreadystatechange = handleResponse;

ajaxRequest.send(null);

我想做的只是将其转换为类似 jquery 的物质。进行了较早的尝试并简单地替换了一些代码，但它不断遇到各种错误

$(document).ready(function() { //Make sure the document is done loading
    $.ajax({ //Initialize the ajax object
        url: "data/games.json", //set the target url`
        dataType: 'JSON', //set the expected response type
        success: function(response){ //On success we do something
            let data = response.responseText;

            let ul1 = $('.ajax')[0];
            let ul2 = $('.ajaxCheck')[0];
            let ul3 = $('.ajaxCheck')[1];
            if (ul1) {
                ul1.html(displayOutput(data, false));
            } else {
                ul2.html(displayOutput(data, true));
                ul3.html(displayOutput(data, true));
            }

        },
        error: function() {
            console.error('Whoops something went wrong...');
        }
    });
});
console.log(data);



const displayOutput = (games, hasCheckbox) => {

    var newReleases = games.filter(function(game){
        if(game.Type==="New Release"){
            return true;
        }
        return false;
    })


    var comingSoon = games.filter(function(game){
        if(game.Type==="Coming Soon"){
            return true;
        }
        return false;
    })


    console.log(games[1]["Genres"]);
    //let ul = document.getElementById('ajax');
    let output = "";
    var x = 0;
    games.forEach(game => {
    x++;
        output +=`

                    <li>
    <div class=""><input id="togg`+x+`" type="checkbox"><label for="togg`+x+`" class="${hasCheckbox ? 'visible' : 'invisible'}">Compare</label></div></li>
        <li><a href=#><img class="frontGames" src="${game.image}">
              <p><b>Name:</b>${game.Name}<br>
                <b>Release Date:</b>${game.ReleaseDate}</br>
                <b>Genres:</b>${game.Genres}</br>
                <b>Retail Price:</b>${game.RetailPrice}</br>
                <b>Rating:</b>${game.Rating}</br></p></a>



        </li>`;




    })



    return output;

}

这会产生错误，数据位不再有意义。

当然，考虑到 jquery 是 Js 的缩写形式，替换一些行并删除一些位将是一个简单的问题。我不确定如何去做，所以任何帮助将不胜感激。

进行了一些测试并得到了一堆错误:

1.displayout未定义2.无法读取foreach的属性。

每次我进行更正时，都会弹出一个新错误。

Answer 1

如果您已经有一个可用的仅 javaScript 函数，您确实应该考虑保持原样。 jQuery 将使很多任务变得更容易，但也需要加载库。特别是如果你不经常使用它，这是不必要的开销。在 jQuery 中，您可以执行如下操作:

$(document).ready(function() { //Make sure the document is done loading
    $.ajax({ //Initialize the ajax object
        url: "data/games.json", //set the target url`
        dataType: 'JSON', //set the expected response type
        success: function(response){ //On success we do something
            let data = response.responseText;

            let ul1 = $('.ajax')[0];
            let ul2 = $('.ajaxCheck')[0];
            let ul3 = $('.ajaxCheck')[1];
            if (ul1) {
                $(ul1).html(displayOutput(data, false));
            } else {
                $(ul2).html(displayOutput(data, true));
                $(ul3).html(displayOutput(data, true));
            }
        },
        error: function() {
            console.error('Whoops something went wrong...');
        }
    });
});

当然，如果没有函数 displayOutput 和数据源，我就无法测试它。但我认为这应该有效。如果没有，请告诉我并提供错误，我会调整我的答案。