Question

我有这个API函数：

public function login($conn, $user){
    $login = "SELECT username FROM login WHERE username=:user";
    $execLogin = $this->conn->prepare($login);
    $execLogin->bindValue(":user", $user);
    $execLogin->execute();
    $res = $execLogin->rowCount();

    try{
        return $res;
    }
    catch(PDOException $e)
    {
        return $e->getMessage();
    }
}

这是单击登录按钮时的php脚本：

<button id="btn-login"  (click)="login()" [disabled]="!loginGroup.valid" class="btn btn-success">Login </button>

登录功能的脚本将运行：

<?php

require_once('../api.php');

//Getting username and password from Angular

$user = $_POST['user'];

$newApi = new api();
$conn = $newApi->connection();
$res = $newApi->login($conn, $user);

?>

这是打字稿中使用的方法。在API服务中：

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Access-Control-Allow-Origin', '*');
    headerOptions.append('Access-Control-Request-Headers', '*');
    headerOptions.append('Content-Type', 'application/json');
    headerOptions.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');


    this.credentials = {user: username, pass: password};
    const httpParams = new HttpParams();
    httpParams.set('user', username);
    httpParams.set('pass', password);
    //console.log("hi "+ this.credentials);
    return this.http.post('http://dev.local/scripts/login.php', {username, password},  {
      observe: 'response',
      responseType: 'text',
      headers: headerOptions

    }).pipe(map(
        res=>{

          console.log(res)
        },
        err=>
          console.log(err)
      ))
  }

然后单击按钮：

login(){
    let user = this.loginGroup.get('username').value;
    let pass = this.loginGroup.get('password').value;
    this.auth.login(user, pass).subscribe(
      (data)=>{

        console.log(data)
      },
      (error)=>{
        console.log(error)
      }
    )
  }

问题是我总是在控制台的“网络”选项卡上看到以下错误：

call to undefined variable user at line 7

看来用户不是通过打字稿方法发送到PHP脚本的。

编辑

Answer 1

如果您使用HttpParams，请注意该类是不可变的（Documentation）

所以您需要这样做

const httpParams = new HttpParams().set('user', username).set('pass', password);

编辑：您的PHP脚本需要使用表单编码值，因此您需要执行以下操作

let headerOptions = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

return this.http.post('http://dev.local/scripts/login.php',
    httpParams.toString(), {
  observe: 'response',
  responseType: 'text',
  headers: headerOptions

}
);

方法2

如果要以json形式发送数据，则需要修改PHP脚本以解析请求的正文

$jsonInput = file_get_contents('php://input');
$jsonObject = json_decode($jsonInput, true); 
$user = $jsonObject->user;

您需要指定正确的参数名称角边

return this.http.post('http://dev.local/scripts/login.php',
    {user: username, password: password},
    ...

另外，请注意，您的Access-Control标头在角度上没有用，应在响应OPTIONS请求时将其设置为服务器端

Answer 2

首先，打开浏览器的开发人员工具，并检查网络呼叫以查看发送的内容。

然后，您正在实例化HttpParams，但是您没有使用它，因此您没有发送它。

根据David的建议，您需要以表单编码模式进行通信，因此需要将其设置为HttpHeader：

let headerOptions = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

尝试一下：

return this.http.post('http://dev.local/scripts/login.php', 
          {'user': username, 'pass': password}
          { headers: headerOptions }
      )

Angular 6和PHP：无法通过HttpParams将参数发送到PHP脚本

2 个答案: