JSONP呼叫=> ReferenceError:未定义文档 [英] JSONP call => ReferenceError : document is not defined

问题描述

在实习期间，我被要求基于该网站(www.claroline.net)开发一个移动应用程序.我必须使用的技术是将Nativescript与Angular 2结合使用.我设法实现了登录功能，以便网站用户现在可以在该应用程序上登录.

For my internship I'm asked to develop a mobile application based on this website (www.claroline.net). The technology I have to use is Nativescript combined with Angular 2. I managed to implement the login function so users of the website can now sign in on the app.

然后，我必须能够在应用程序上获取网站的通知.开始时，我只想在JSON数组中显示通知.我已经有用于获取JSON数组的URL(get请求可在浏览器上运行)，但是当我从移动应用程序执行此操作时，出现500错误.

Then I have to be able to get the notifications of the website on the app. At the beginning I just want to display the notifications in a JSON array. I already have the url to get the JSON array (the get request works on the browser) but when I do that from the mobile application, I get a 500 error.

然后我听说了有关JSONP的信息，这可能有助于我解决问题.显然，有几件事情要做: -在根组件中导入JSONP_PROVIDERS并进行引导 -在要执行Jsonp调用的组件中导入Jsonp -在网址

I heard then about JSONP which might help me solve my problem. Apparently there is few things to do : - import JSONP_PROVIDERS in the root component and bootstrap it - import Jsonp in the component you want to do the Jsonp call - add a callback parameter in the url

我错过了什么吗?因为即使执行了所有这些操作，但在某些Javascript文件中的控制台中仍出现错误:"ReferenceError:未定义文档"，这很奇怪，因为自从我用Typescript进行编码以来，就没有名为document的变量.

Am i missing anything ? Because even though I did all that, I get an error in the console :"ReferenceError : document is not defined" in some Javascript file which is weird because since I'm coding in Typescript, there are no variables called document.

推荐答案

以下是在Angular2中使用JSONP支持的方法.

Here is the way to use JSONP support in Angular2.

在调用bootstrap函数时注册了JSONP_PROVIDERS后:

After having registered JSONP_PROVIDERS when calling the bootstrap function:

import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

然后，您可以使用从构造函数注入的Jsonp类的实例来执行请求:

You can then execute your request using an instance of the Jsonp class you injected from constructor:

import {Component} from 'angular2/core';
import {Jsonp} from 'angular2/http';

@Component({
  selector: 'my-app',
  template: `
    <div>
      Result: {{result | json}}
    </div>
  `
})
export class AppComponent {
  constructor(jsonp:Jsonp) {
    var url = 'https://...&c=JSONP_CALLBACK';
    jsonp.request(url, { method: 'Get' })
     .subscribe((res) => {
       this.result = res.json()
     });
  }
}

在您的情况下，c参数可能有另一个名称，但是您需要在其中设置JSONP_CALLBACK值.

In your case, the c parameter could have another name but you need to set the JSONP_CALLBACK value in it.

请参阅此插件: http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=preview

这篇关于JSONP呼叫=> ReferenceError:未定义文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！