如何在 url_for('static', filename='') 中使用 javascript 变量 - Javascript

在 Flask 中，我们使用 url_for('static', filename='') 来获取静态文件的URL。有时候我们希望在Javascript中获取这个URL，并且这个URL根据一些动态信息而改变。那么怎么实现呢？

方法一：使用全局变量

我们可以在Javascript代码中定义一个全局变量，来保存这个静态文件的URL。然后在Flask中，将这个URL通过模板传递给Javascript所在页面，并赋值给这个全局变量。

<!-- 在HTML中定义全局变量 -->
<script>
    window.static_url = '{{ url_for('static', filename='') }}';
</script>

在Javascript中，我们就可以通过访问 window.static_url 来获取这个URL了。

// 在Javascript中访问全局变量
const url = window.static_url;

方法二：使用AJAX请求

另一种方法是，在Javascript中通过AJAX请求来获取这个URL。这种方法的好处是，可以根据需要在任何时候获取URL，而不必在页面加载时就定义好URL。

// 使用AJAX请求获取URL
function getStaticUrl(callback) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.open('GET', '/static/url', true);
    xhr.send();
}

// 在回调函数中获取URL
getStaticUrl(function(url) {
    console.log(url);
});

在Flask中，我们需要定义一个路由来处理这个AJAX请求，并返回这个静态文件的URL。

# 定义路由
@app.route('/static/url')
def get_static_url():
    url = url_for('static', filename='')
    return url

使用这种方法时，我们需要注意一些细节。首先，应该定义一个新的路由处理这个AJAX请求，而不是直接使用现有的路由。其次，这种方法会增加服务器的负担，因为每个请求都会重新计算URL。因此，如果静态文件的URL不会随着用户的操作而改变，我们应该使用方法一来获取URL。

以上就是在 url_for('static', filename='') 中使用javascript变量的两种方法。根据需要选择适合的方法，可以让我们更灵活地掌控网站的静态文件。