如何使用AJAX替换内容

Question

当前编码一个项目，加载时将在AJAX完成后用编号列表替换页面上的GIF。我找不到有关如何执行此操作的任何信息，以及我应该放在应用程序中的内容。我知道我必须使用负载，但是Ajax对我来说是全新的，我不明白它的舔。

我的node.js服务器代码

'use strict';
const express = require('express'),
    request = require('request'),
    app = express();
app.set('view engine', 'pug');
app.set('views', './views');
app.get('/', function(req, res) {
});
const server = app.listen(3000, function () {
    console.log(`Started server on port ${server.address().port}`);
});

我正在使用的哈哈模板

doctype
html
    head
        title PokeyManz
        h1 Top ten starter Pokemon!
    body
        p1 For many gamers, this decision was one of the most influential choices they've ever made!
        div(id='div1')
            img(src='/img/pokeball_gif.gif')

我目前在Ajax文件中拥有的内容

'use strict';
let xhr = new XMLHttpRequest();
xhr.open('GET', 'localhost:3000/');
xhr.addEventListener('load', function() {
    console.log('load');
});

Answer 1

好的，为了简化一点，我鼓励您使用支持Ajax呼叫的库，jQuery可以很好地完成这项工作。因此，请查看此JSFIDDLE，它使用jQuery.ajax()方法来获取10个口袋文件的列表，当然，您可以用旋转器或您发布的GIF替换init中的口袋妖怪映像。希望这对您有帮助。欢呼，sigfried