时间戳

首页 > 解决方案 > Javascript fetch() 函数在点击时不起作用

javascript - Javascript fetch() 函数在点击时不起作用

问题描述

我有一个简单的代码，当我单击按钮时，它要求程序使用 fetch() 获取一些数据：

<button id="hello-btn">Say Hello!</button>
<script>
    var route = "/a-url";
    let fetch_data = (route) => {
        fetch(route)
            .then(res => res.text())
            .then(data => $("#resp").text(data))
    }
    
    $("#hello-btn").click((route) => {
        fetch_data(route);
    });
</script>

当我单击按钮时， fetch_data() 不会运行。当我在 .click() 函数之外运行 fetch_data() 时，它运行良好。

任何解释为什么？谢谢！

标签： javascriptjquery

解决方案

问题在于，在您的#hello-btn click 函数中，您将其定义route为 click 事件对象，并将其作为要在函数中使用的路由变量传递。

尝试使用您想要的 URL 调用您的函数。

let fetch_data = (route) => {
    fetch(route)
        .then(res => res.text())
        .then(data => $("#resp").text(data))
}

$("#hello-btn").click((e) => {
    fetch_data("/a-url");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hello-btn">Say Hello!</button>

推荐阅读