angular 2服务不调用php文件

时间:2016-07-23 15:46:43

标签: javascript php json angular angular2-services

我正在学习角度2并且我做了一个连接到数据库的测试,但是我得到一个错误:SyntaxError:意外的令牌<在JSON的第0位。

所以我让我的xampp在端口80或443上工作。 我测试的网址(我使用的是角度cli)是:localhost:4200

这是我的尝试。我有这种方法的服务:

  getUsers(){
return this._http.get('getusers.php')
  .map(res => res.json());
 }

getusers.php文件位于公用文件夹中。 这是它的内容。非常基本只是为了获得一些结果并将它们发送回json:

 // set up the connection variables
    $db_name  = 'mydb';
    $hostname = 'localhost';
    $username = 'myusername';
    $password = 'mypass';

    // connect to the database
    $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);


    $sql = 'SELECT * FROM users';


    $stmt = $dbh->prepare( $sql );


    $stmt->execute();


    $result = $stmt->fetchAll( PDO::FETCH_ASSOC );


    $json = json_encode( $result );

    echo $json;

所以我在组件中添加我导入服务,在构造函数中初始化它并订阅:

  constructor(private _usersService: UsersService) {}

  ngOnInit() {
     this._usersService.getUsers()
       .subscribe(
         data => this.getUsers = JSON.stringify(data),
         error => alert(error),
         () => console.log("Finihed")
      );
  }

我在这里失踪了什么。我做了大量的ajax调用,但第一次使用angular。也许它是港口?或者其他我错过的东西?

最好的问候

2 个答案:

答案 0 :(得分:1)

所以既然情况是两个端口的跨域。在您的通话中使用带端口的完整网址: http://localhost:80/yourproject/public/getContacts.php

并在服务器端添加CORS标题,然后输出:

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Content-Type: application/json');

echo json_encode($result);

因为我只是测试我使用*,但不建议这样做。通常允许特定的网址。

答案 1 :(得分:0)

您需要订阅ajax调用才能工作; 谁曾经调用过getUsers方法应该订阅它:

 getUsers(){
     return this._http.get('getusers.php')
     .map(res => res.json());
 }

让我们说你在这里调用get方法:

 myOtherFunction(){
     this.getUsers.subscribe((response)=>{
           console.log('response',response);

     })

}