如何使用 AJAX 替换内容答案

【问题标题】：How to replace content using AJAX如何使用 AJAX 替换内容
【发布时间】：2017-11-20 23:37:02
【问题描述】：

目前正在编写一个项目，加载后将在 AJAX 完成后将页面上的 gif 替换为编号列表。我找不到任何关于如何做到这一点，以及我应该在我的 app.get 中添加什么。我知道我必须使用负载，但 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');

});

【问题讨论】：

您可以将图片地址传递给您的 pug 模板，然后替换内容以使用它。
图片地址已经在pug模板中；希望我没有误会你
Jummm，我以为您是在尝试将图像从服务器传递到模板，那么，您是在尝试执行加载程序之类的操作，等待 AJAX 调用完成吗？
是的，我想做的是用 gif 加载页面，当 ajax 调用完成时，ajax 会删除 gif 并将其替换为编号列表（在本例中为编号列表将是前 10 名首发口袋妖怪）

标签： node.js ajax pug

【解决方案1】：

好的，为了简化一点，我鼓励您使用支持 AJAX 调用的库，jQuery 可以很好地完成这项工作。所以，看看这个jsfiddle 它使用jQuery.ajax() 方法来获取10 个口袋妖怪的列表，当然你可以用微调器或你发布的gif 替换init 中的口袋妖怪图像。希望这对您有所帮助。干杯，西格弗里德

【讨论】：