如何在 Jade/Pug 文件中调用 Javascript function

Question

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

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");
                }
            });
    }```

Answer 1

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

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

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

---

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

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

Answer 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();