Cannot Post to php script Angular 2

Question

I am trying to use a post request to a php script, which contains data I need.

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());
    }
}

In the ngOnInit the getTrips() function from my DbService will be called, which looks like this.

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());
    }
}

This would be the php file

<?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);
?>

When I do that, I get the following error in the console

This would be the project structure

The weird thing is when I change the post to a get, I get the JSON string of the php file.

The Idea would be to have a php file which is commuicating with the local database, to return data, but for now I just hardcoded the data in the php file.

Would appreciate the help

Regards

Im sorry I forgot to change it back even with .php its the same error, I updated the question and the error picture — stackg91
– stackg91, Commented Jan 14, 2017 at 9:45

Amit kumar · Accepted Answer · 2017-01-14 10:43:21Z

1

the problem with you code is you are calling this.http.post with relative url.first you have to install Apache web server and php in your system if you want run it locally. and your complete project should be under Apache web directory like all our php projects

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

your private dbUrl is wrong. php files works only on server side. so there should be complete address of your file location after localhost. like this

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

add localhost in your url then include location of your db_api file. if you have uploaded your code on some server then use there address in place of localhost. You are calling a http request which should go to a server.

so your dbUrl should be like private dbUrl = 'http://localhost:3000/tripahead/apis/db_api.php';

 @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());
    }
}

edited Jan 14, 2017 at 10:43

answered Jan 14, 2017 at 10:16

Amit kumar

6,1676 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stackg91 Over a year ago

Okay well I had the full path before, and it was not working, but as I read your answer I realised I have my php file not running on any server or xamp or anything its just in the project, so that might be the problem right?

Amit kumar Over a year ago

sir first you have to install Apache web server and php in your system if you want run it locally. and your complete project should be under Apache web directory like all our php projects. then it will work :)

Amit kumar Over a year ago

the error that you got is 404 file not found.localhost:3000/tripahead/apis/db_api.php <-- see add location from your apache directory to your php file.

stackg91 Over a year ago

Yes I moved the php file into my ampps directory where my php server is running and now its working thank you very much, If you create an answer I can accept It if you want

Collectives™ on Stack Overflow

Cannot Post to php script Angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related