如何从Angular 2向PHP发送ajax请求[POST]?

时间:2016-10-25 06:48:08

标签: php mysql ajax angular

我很沮丧,因为我一直在努力完成这类问题,搜索文档并搜索可能重复的问题。

我已阅读此文档https://angular.io/docs/ts/latest/guide/server-communication.html,但这里没有使用PHP发布数据的示例。

我想要做的是检查数据库是否有尚未批准的事务。它每3秒运行一次。

这就是我所拥有的

我创建了我的服务[get-new-data.service.ts]

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class GetNewDataService {
    constructor(private http: Http) { }
    private url = 'app/service/getDataService.php';

    getData(bangko) {
        let headers = new Headers('Content-Type', 'application/x-www-form-urlencoded'),
            options = new RequestOptions({ headers: headers }),
            bank = `bank=${bangko}`;

        return this.http.post(this.url, bank, options).map(res => res.json());
    }
}

在我的app.module.ts上,我导入了HttpModule - imports和GetNewDataService - providers。

在我的组件上

import { Component, OnInit } from '@angular/core';
import { GetNewDataService } from '../service/get-new-data.service';
import { Observable } from 'rxjs/Rx';

@Component({
    templateUrl: 'app/tpl-html/mandiri.component.html'
})

export class MandiriComponent implements OnInit {
    constructor(private getDataService: GetNewDataService) { }

    ngOnInit() {
        setInterval(() => {
            this.getDataService.getData('mandiri')
                .subscribe(res => console.log(res));
        }, 3000)
    }
}

我不知道如何提出正确的请求并将我的angular 2应用程序与mysql和php集成。

任何帮助将不胜感激。谢谢:/

2 个答案:

答案 0 :(得分:1)

Post JSON from angular 2 to php

http://4dev.tech/2016/07/using-http-client-to-integrate-angular2-to-php/

var link = 'app/service/getDataService.php';
var data = JSON.stringify({username: this.data.username});

this.http.post(link, data)
.subscribe(data => {
 this.data.response = data._body;
}, error => {
    console.log("Oooops!");
});

答案 1 :(得分:-1)

我们走了..

<强> HTML

<div ng-app="myApp">
 <form ng-controller="FormCtrl" ng-submit="submitForm()">
    First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
    Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
    Description:<br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
        <br/>
    <input type="radio" ng-model="form.gender" value="female" />Female ...
    <input type="radio" ng-model="form.gender" value="male" />Male <br/>
        <br/>
    <input type="checkbox" ng-model="form.member" />Already a member
        <br/>
    <input type="submit" ngClick="Submit" >
 </form>
 <div id="getdata"></div>
</div>

<强>脚本

  var app = angular.module('myApp', ['ngSanitize']);
  app.controller('FormCtrl', function ($scope, $sce, $http) {
   var formData = {
      firstname: "default",
      emailaddress: "default",
      textareacontent: "default",
      gender: "default",
      member: false
   };
  $scope.submitForm = function() {
    $http({
         url: "form.php",
         data: $scope.form,
         method: 'POST',
         headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

        }).success(function(data){
           console.log("OK", data);
      }).error(function(err){"ERR", console.log(err)})
    };
  });

<强>腓

 $file = 'form2.txt';
 $postdata = file_get_contents("php://input");
 $data = json_decode($postdata, true);
 echo '<h3>Name ='.$data['firstname']."<br/>".'Email ='.$data['emailaddress']."<br/>".'Description ='.$data['textareacontent']."</h3>";