在 pug 中使用 Ajax 更改文本内容答案

【问题标题】：Change content of text with Ajax in pug在 pug 中使用 Ajax 更改文本内容
【发布时间】：2020-04-01 06:54:52
【问题描述】：

我必须在我的网站上使用 Ajax 来完成一个学校项目。我想更改按钮的内容，但我首先希望能够更改一些文本。我找到了一些关于如何更改 pug 文件中的文本的示例，但它们似乎从未起作用。有人知道我做错了什么吗？

帕格：

extends layout

block content
    #reizen.w3-content.w3-container.w3-padding-64
        //test ajax        
        #demo
            h2 The XMLHttpRequest Object
            button(type='button' onclick='loadDoc()') Change Content

    block content
    script.
        function loadDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML =
                    this.responseText;
                }
            };

            xhttp.open("GET", "ajax_info.txt", true);
            xhttp.send();
        }

我还有一个小文件 ajax_info.txt，在根地图（pug 文件在视图地图中）只有：

Ajax is cool!

结果总是一些文本： XMLHttpRequest 对象，在文本下方有一个按钮，更改内容，但是当我点击它时没有任何反应。

【问题讨论】：

您应该阅读this article，了解如何使用 StackOverflow 完成家庭作业。

标签： javascript ajax button pug

【解决方案1】：

Pug 是一个完全独立于 Ajax 的范例。 Ajax 用于在不重新加载页面的情况下从服务器发出请求，并且 pug 在从服务器请求页面时动态呈现页面。 pug 应用程序涉及构建多个页面，而 Ajax 应用程序使用一个页面。

您可以使用 pug 生成 HTML 和 JavaScript，但这就是 pug 结束的地方。它根本不能用于 Ajax 调用。

您应该研究 Ajax 库，如 Axios 或 jQuery，并把注意力集中在那里。您可以使用 Express（无 pug）来处理您的 API 调用。

【讨论】：