Question

我正在尝试对php脚本使用post请求，其中包含我需要的数据。

home.component.ts

import { Component, OnInit } from '@angular/core';
import { UserComment } from '../definition/user.comment';
import { HomeService } from '../services/home.service';
import { DbService } from '../services/db.service';
import { Trip } from '../definition/trip';

@Component({
    templateUrl: './templates/home.html',
    providers: [HomeService, DbService]
})
export class HomeComponent implements OnInit {

    user_comments: UserComment[];
    trips: Trip[];

    constructor(private homeService: HomeService, private dbService: DbService) { }

    getUserComments(): void {
        this.homeService.getData().then(user_comments => this.user_comments = user_comments);
    }
    ngOnInit(): void {
        this.getUserComments();
        console.log(this.dbService.getTrips('test').subscribe());
    }
}

在ngOnInit getTrips()我的DbService函数将被调用，如下所示。

import { Injectable }                              from '@angular/core';
import { Http, Response, Headers, RequestOptions}  from '@angular/http';
import { Trip }                                    from '../definition/trip';
import { Observable }                              from 'rxjs/Rx';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class DbService {

    constructor (private http: Http) {}

    private dbUrl = '../apis/db_api.php';  // URL to web API

    getTrips(name): Observable<Response> {
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});
        let body = JSON.stringify(name);
        return this.http.post(this.dbUrl, body, options).map((res: Response) => res.json());
    }
}

这将是php文件

<?php
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Content-Type: application/json');
$data = array(
    'id' => 1,
    'user_id' => 1,
    'route_name' => 'test',
    'route_info' => 'test info',
    'rating' => 2.5,
    'coordinates' => '9838e901',
    'is_active' => 1,
    'deleted_at' => NULL
);

echo json_encode($data);
?>

当我这样做时，我在控制台中出现以下错误

这将是项目结构

奇怪的是当我将帖子更改为get时，我得到了php文件的JSON字符串。

想法是有一个与本地数据库通信的php文件，以返回数据，但是现在我只是硬编码了php文件中的数据。

非常感谢帮助

此致

Answer 1

你的代码问题是你用相对url.first调用this.http.post你必须在你的系统中安装Apache web服务器和php，如果你想在本地运行它。并且您的完整项目应该在Apache Web目录下，就像我们所有的php项目一样

private dbUrl = '../apis/db_api.php';  // URL to web API

您的私有dbUrl错误。 php文件仅适用于服务器端。所以在localhost之后应该有你的文件位置的完整地址。像这样

 var Path="http://localhost/amit/login/server/login.php";

在您的网址中添加localhost，然后包含您的db_api文件的位置。如果您已将代码上传到某个服务器上，则使用该地址代替localhost。您正在调用应该发送到服务器的http请求。

所以你的dbUrl应该像私人dbUrl =＆＃39; http://localhost:3000/tripahead/apis/db_api.php＆＃39;;

 @Injectable()
export class DbService {

    constructor (private http: Http) {}

    private dbUrl = 'http://localhost:3000/tripahead/apis/db_api.php'; <-- location of your server php file location. 

    getTrips(name): Observable<Response> {
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});
        let body = JSON.stringify(name);
        return this.http.post(this.dbUrl, body, options).map((res: Response) => res.json());
    }
}

无法发布到php脚本Angular 2

1 个答案: