如何使用AngularJS在页面从外部URL和显示获得JSON - 资源间preTED为脚本,但MIME类型文本转/ HTML如何使用、脚本、文本、类型

2023-09-13 03:24:32 作者:一年一年安安静静陪你过

我读过关于这里的一些类似的问题,但他们都没有帮我解决我的问题。我是很新的HTML / JS / AnuglarJS所以请裸陪我。我试图让一个HTTP调用到URL得到一个JSON和我的网页上显示这一点。

该JSON看起来是这样的:

{\"ticker\":{\"high\":484.01099,\"low\":470.37201,\"avg\":477.1915,\"vol\":2193393.03322,\"vol_cur\":4588.62668,\"last\":482.16,\"buy\":482.16,\"sell\":481.2,\"updated\":1398350394,\"server_time\":1398350394}}

在code包含下面。我读到我必须使用'JSONP'来,但我无法弄清楚如何使用它。

 < HTML NG-应用>    <身体GT;        &所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.min.js>&下; /脚本>        < D​​IV ID =内容的风格=最小宽度:1200像素,最大宽度:90%:保证金左:自动;保证金右:自动;>            < D​​IV的风格=WIDTH:520px;浮动:左;>                < H4>博特摘要:LT; / H4>            < / DIV>            < D​​IV NG控制器=TickerControl的风格=宽度:为680像素;浮动:左;>                < H4>市场综述< / H4>                < P>价格= {{}数据}< / P>            < / DIV>        < / DIV>        < D​​IV>< / DIV>        <脚本类型=文/ JavaScript的>            功能TickerControl($范围,$ HTTP,$ templateCache){                $ scope.method ='JSONP';                $ scope.url ='https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK';                $ scope.getTicker =功能(){                  $范围code =空。                  $ scope.response = NULL;                  $ HTTP({方法:$ scope.method,网址:$ scope.url,缓存:$ templateCache})。                    成功(功能(数据,状态){                      $ scope.status =状态;                      $ scope.data =数据;                    })。                    错误(功能(数据,状态){                      $ scope.data = ||数据请求失败;                      $ scope.status =状态;                  });                };                            $ scope.getTicker();            }        < / SCRIPT>    < /身体GT;< / HTML> 

更新

我现在已经修改了我的code尝试做JSONP请求。我收到以下错误:

 资源间preTED为脚本,但使用MIME类型text / html转:https://btc-e.com/api/2/btc_usd/ticker?callback= angular.callbacks._0。 angular.js:8582未捕获的SyntaxError:意外的令牌:股票:1 
angularjs和ajax的结合使用 教程大全

我似乎越来越背课文。因为我无法控制服务器的响应,我怎么能分析该文本以JSON ......或者只是甚至显示它...它可以查看在Chrome开发环境。

更新2

确定这样看来,这似乎是有没有被正确地配置服务器的问题。由于我没有访问它,这将是很好能够只接收文本,并在客户端解析吧!

解决方案

做一些更多的研究,并与不同的方法进行实验后,我很遗憾地告诉你,你想要达到什么不能做。

我发送一个GET请求到 https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK 用于测试目的,并在响应它的头说:

  

内容类型→为text / html;字符集= UTF-8

由于你做跨域调用,您必须将服务器无法访问,你必须使用JSONP。但JSONP不与的text / html 内容合作。这涉及到误差

  

资源间preTED为脚本,但MIME类型文本转/ HTML

因此​​,即使响应貌似有效的JSON,它不是由您的客户端应用程序对待。

要解决这个问题,你就必须在服务器上添加适当的Content-Type头,而你却没有打开。

从this相关的问题:

  如果当正确的服务器中嵌入的JavaScript函数调用的响应

JSONP只能用。

要总结一下:

您应该​​

允许配置服务器跨域调用这么做通过配置服务器这样做发回正确的Content-Type头

不幸的是,你必须对服务器的访问权限。

请注意,这不是你的错。这是因为服务器配置不正确。

I've read some similar questions on here but none of them have helped me fix my problem. I am quite new to HTML/JS/AnuglarJS so please bare with me. I am trying to make an http call to a URL to get a JSON and display this on my page.

The JSON looks like this:

{"ticker":{"high":484.01099,"low":470.37201,"avg":477.1915,"vol":2193393.03322,"vol_cur":4588.62668,"last":482.16,"buy":482.16,"sell":481.2,"updated":1398350394,"server_time":1398350394}}

The code is included below. I read that I have to use 'JSONP' to but I couldn't figure out how to use it.

<html ng-app>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.min.js"></script>
        <div id = "content" style="min-width: 1200px; max-width: 90%: margin-left: auto; margin-right: auto;">
            <div style="width: 520px; float: left;">
                <h4>Bot Summary:</h4>
            </div>
            <div  ng-controller="TickerControl" style="width: 680px; float: left;">
                <h4>Market Summary</h4>
                <p>Price = {{data}} </p>
            </div>
        </div>
        <div></div>

        <script type="text/javascript">

            function TickerControl($scope, $http, $templateCache) {
                $scope.method = 'JSONP';
                $scope.url = 'https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK';

                $scope.getTicker = function() {
                  $scope.code = null;
                  $scope.response = null;

                  $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
                    success(function(data, status) {
                      $scope.status = status;
                      $scope.data = data;
                    }).
                    error(function(data, status) {
                      $scope.data = data || "Request failed";
                      $scope.status = status;
                  });
                };

                            $scope.getTicker();
            }

        </script>

    </body>
</html>

UPDATE

I have now modified my code to try and do JSONP requests. I am getting the following error:

Resource interpreted as Script but transferred with MIME type text/html: "https://btc-e.com/api/2/btc_usd/ticker?callback=angular.callbacks._0". angular.js:8582
Uncaught SyntaxError: Unexpected token : ticker:1

I seem to be getting text back. Since I cannot control the server response, how can I parse this text to JSON... or just even display it... It's available to view in the chrome dev environment.

UPDATE 2

OK so apparently this seems to be an issue with the server not being configured properly. Since I don't have access to it, it would be nice to be able to just receive text and parse it in the client!

解决方案

After doing some more research and experimenting with different methods, I regret to inform you that what you're trying to achieve cannot be done.

I sent a GET request to https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK for testing purposes and in the response headers it says

content-type → text/html; charset=utf-8

Because you do cross domain calls and you have no access to the server, you have to use jsonp. But jsonp does not work with text/html content. This related to the error

Resource interpreted as Script but transferred with MIME type text/html

So even though the response looks like valid JSON, it is not treated as such by your client application.

To solve this you would have to add the proper Content-Type header on the server, but you have no access to it.

Quote from this related question:

jsonp can only be used if and when the server properly embed the response in a javascript function call.

To sum it up:

You should either

allow cross domain calls by configuring the server to do so send back the proper content-type header by configuring the server to do so

Sadly you have no access to the server.

Be aware that this is not your fault. It is because the server is not configured properly.