如何在 Jade/Pug 文件中调用 Javascript 函数答案

【问题标题】：How to call a Javascript function inside a Jade/Pug file如何在 Jade/Pug 文件中调用 Javascript 函数
【发布时间】：2021-11-20 01:22:18
【问题描述】：

我有一个 node.js 项目，其前端是用 Pug 编写的。在哈巴狗方面，我编写了一个 Javascript 函数，它进行 Ajax 调用并返回一个字符串，我试图在同一个哈巴狗文件中调用这个函数，但它给了我一个函数未定义错误。有人可以帮忙吗？

header(class="global-header")
    p Current Status: #{getCurrentAvail()}

script.
    function getCurrentAvail(){
        $.ajax({
                url: "/admin/account/accountAvailability",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                async: false,
                success: function(data){
                    console.log("===1")
                    currentAvail = data.message
                    console.log(currentAvail)
                    return data.message
                },
                error: function(data){
                    console.log("Error function avail");
                }
            });
    }```

【问题讨论】：

标签： javascript node.js ajax frontend pug

【解决方案1】：

您似乎有一些外部数据，并且您希望该数据显示在呈现的网页中。您在这里有两个基本选择：

1.服务器端获取和呈现数据。您可以让您的服务器在呈现页面之前获取数据并将该数据传递给您的模板引擎，以便您的模板引擎可以将数据插入页面的适当位置。

2。客户端获取和插入数据。您可以在网页的<script> 标记内调用getCurrentAvail() 函数。这会将渲染的网页发送到浏览器。在加载时，浏览器将执行您的脚本，从您的服务器获取数据，然后您将使用浏览器中的 DOM API 将该 ajax 调用的结果插入到网页中，以使其对页面中的用户可见.

另外，请注意您的函数getCurrentAvail() 根本没有返回值。您没有从外部函数返回任何内容。您的 return data.message 位于异步成功回调中，因此无处可去。如果您打算使用客户端选项 #2，那么您可以将 DOM 操作代码直接放入成功回调函数中。

您当前的代码正在尝试执行 1/2 服务器和 1/2 客户端，但这是行不通的。

【讨论】：

【解决方案2】：

始终完全清楚服务器中的内容和客户端中的内容。 Ajax 方法在浏览器中运行。 #{variable} 构造仅存在于 Pug 中，并且替换发生在服务器上。

我认为这是你需要的：

header(class="global-header")
  p Current Status: 
    span#status

script.
  function getCurrentAvail(){
    $.ajax({
            url: "/admin/account/accountAvailability",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function(data) {
                      document.getElementById("status").innerText = data.message
                     },
            error: function(data){
                     console.log("Error function avail");
                    }
           });
    }

  getCurrentAvail();

【讨论】：