Question

我写了以下HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML page</title>
</head>

<body>
    <script src='http://localhost:3000?callback=mycallbackFunction'> </script>
    <script>
        function mycallbackFunction(data) {
            alert('here');
            alert (data['a']);
        }
    </script>
</body>

</html>

如您所见，脚本标记包含对远程服务器的JSONP请求。

此外，我编写了以下node.js文件并将其作为服务器运行：

var express = require（＆＃39; express＆＃39;）; var app = express（）;

app.get('/', function(req, res) {
   res.jsonp({'a': 'blabla'});
});

app.listen(3000);

运行node.js文件并使用html页面打开浏览器后，我希望看到一个警告弹出窗口。但不是。我什么也没看到。

开发人员工具中的“网络”标签显示该请求已被接受：

你知道怎么解决吗？

Answer 1

您需要更换<script>元素的顺序。

说明：

Express正确地提供了一个看起来像myCallbackFunction({'a': 'blabla'})的脚本，这正是您所希望的。但是，此脚本立即运行，并且尚未定义myCallbackFunction，因此没有任何反应。然后，在下一个<script>块中，您定义myCallbackFunction，但这是无用的，因为（失败的）调用已经在之前的<script>中发生。

此外，C中mycallbackFunction的案例不匹配 - 请确保回调参数与函数名称之间的大小写一致。

Answer 2

解决方案是切换两个脚本标记的顺序：

<body>
    <script>
        function mycallbackFunction(data) {
            alert('here');
            alert (data['a']);
        }
    </script>
    <script src='http://localhost:3000?callback=mycallbackFunction'>  </script>
</body>

JSONP - express：为什么浏览器会忽略该请求？

2 个答案: