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

Question

我有一个 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");
                }
            });
    }```

Answer 1

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

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

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

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

您当前的代码正在尝试做 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();

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

How to call a Javascript function inside a Jade/Pug file

javascript

node.js

ajax

frontend

pug