如何將表格從Angular發送到PHP？

Question

我正在嘗試將我的表單從angular 5發送到我的php文件，然后將結果重新注入angular

 /* My typescrit file */

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { trigger , state, style, transition, animate, keyframes } from 
'@angular/animations';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, 
MatIconModule, MatCheckboxModule, MatRadioModule, MatSelectModule, 
MatInputModule, MatDialogModule, MatTooltipModule, MatSnackBarModule, 
MatSidenavModule } from '@angular/material';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

constructor(public http: HttpClient) {}

let formdata = document.querySelector('form');

let datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };

let apiurl = '../../assets/php/message.php';

this.http.post(apiurl,datajson)
.subscribe(data => {alert(data.data)})
.catch(error=>{ alert (error.status)});

</pre>

但是我收到“ Http undefined error”。

Answer 1

您可以通過將獲取或發布請求從角度控制器發送到php頁面來實現。 示例代碼應如下所示（來自我的網站）：

app.controller('sign_up', function ($scope, $http) {
    /*
    * This method will be called on click event of button.
    * Here we will read the email and password value and call our PHP file.
    */
    $scope.check_credentials = function () {
    document.getElementById("message").textContent = "";
    var request = $http({
        method: "post",
        url: window.location.href + "login.php",
        data: {
            email: $scope.email,
            pass: $scope.password
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    /* Check whether the HTTP Request is successful or not. */
    request.success(function (data) {
        document.getElementById("message").textContent = "You have login successfully with email "+data;
    });
}

Answer 2

http是未定義的，因為您嘗試使用它而不在類中定義它。

我猜您顯示的文件來自您的app.module.ts嗎？ 如果是這樣，則在其中導入HttpClientModule 。

import { HttpClientModule } from '@angular/common/http';
...
imports: [
// import HttpClientModule after BrowserModule.
HttpClientModule,
],

轉到您的app.component.ts並在那里進行請求。 或在您希望完成的任何組件中。

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };
apiurl = '../../assets/php/message.php';


 constructor(private http: HttpClient) {
  this.http.post(apiurl, datajson).subscribe(data => {alert(data.data)}
  .catch(error=> {alert(error)}
 }
}