将数据从angular发布到php api端

Question

Here is my (login.service.ts) code:

private pageURL = 'http://localhost/social/src/app/api/ws/react_signup_login/login.php';
    user = new UserLogin();

    login(value: Object): Observable<any> {
        const body = new URLSearchParams();
        Object.keys(value).forEach(key => {
            body.set(key, value[key]);
        });

        let headers = new Headers();
        headers.append('Content-Type',
            'application/x-www-form-urlencoded');
        return this._http.post(this.pageURL, this.user.toString(), {
            headers: headers
        }).map(res => res.json());
    }

And this is my login.ts class

export class UserLogin {
    username: string;
    password: string;
    constructor() {
    }
}

in (login.component.ts)

user = new UserLogin();
login(value) {
        this._loginService.login({value})
            .subscribe(
                response => this.user = response,
                error => console.log(error)
            );
    }

Finally my (login.php) that I expect the error is here

header("Access-Control-Allow-Origin: *");
header("Content-type:application/json");

if ($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST))
    $_POST = json_decode(file_get_contents('php://input'), true);

$params['username'] = $_POST['username'];
$params['password'] = $_POST['password'];

When I'm trying to (var_dump) the $params I got this:

array(2) {
  ["username"]=>
  NULL
  ["password"]=>
  NULL
}

Answer 1

In your POST Http call you should use your defined URLSearchParams as body and not user, because your user object is empty.

Change your http call code block in login.service.ts from this:

return this._http.post(this.pageURL, this.user.toString(), {
            headers: headers
        }).map(res => res.json());

to this:

return this._http.post(this.pageURL, body.toString(), {
            headers: headers
        }).map(res => res.json());