Question

我有一个js文件，其中我声明了一个我想在html脚本中使用的变量

js文件（controllerB.js）

var modalArticles = [];
$(document).ready(function () {
    $.ajax({
        url: "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey=*****"
    }).then(function (data) {

        modalArticles = data.articles;
    })
})

html文件

<head>
<meta charset="utf-8" />
<title>News</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="js/handlebars-v4.0.10.js"></script>
<script type="text/javascript" src="js/controllerB.js"></script>


</head>
<body></body>
<script type="text/javascript">
    console.log('print: ' + modalArticles);
</script>

modalArticles在html中为空

Answer 1

您的变量为空，因为它仅在加载文档时初始化。您使用异步请求填充变量，因此只有在Promise被解析时才可用。

如果要在HTML中显示变量的内容，可以使用jquery（根据您的标记）设置要在其中显示的元素的HTML，以设置内容。 then方法。

如果您希望它显示在“#mydiv”中，您可以这样做：

.then(function(value){
   $('#mydiv').html(value);
})

在html文件上访问js文件的变量

1 个答案: