使用Angular HttpClient调用PHP脚本

问题描述 投票：0回答：2

我试图通过简单的测试从角度4应用程序调用PHP脚本，但我无法使其工作。

脚本位于assets / php / test.php中，并包含以下代码，这些代码在通过url运行时有效：

<?php
try{
    $bdd=new PDO('mysql:host=localhost;dbname=musictools;charset=UTF8','root','');
    $bdd->exec('INSERT INTO gamme(nom) VALUES(\'mineure\')');
}catch(Exception $e){
    die($e->getMessage());
}

?>

没有改变任何东西（除了在app.module.ts中导入HttpClientModule），否则我改变了我的app.component.ts来测试：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private http:HttpClient){
      http.get('./assets/php/test.php').subscribe(data => {
        alert(data);
      });
      http.post("./assets/php/test.php",{}).subscribe(data => {
        alert(data);
      });
  }
}

get请求工作并加载test.php会抛出一个错误，因为它无法读取它（但这并不重要因为我不想执行这个脚本而不读它所以它只是告诉我路径是正确的） 。

但邮件请求告诉我它甚至无法到达文件，是否应该在其他地方？或者我使用了错误的模块？

以下是控制台错误：

console error

network

Angular is running in the development mode. Call enableProdMode() to enable the production mode.



core.es5.js:1020 ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/php/test.php", ok: false, …}error: {error: SyntaxError: Unexpected token < in JSON at position 0
    at Object.parse (<anonymous>)
    at XMLHt…, text: "<?php
↵echo "a";
↵try{
↵    $bdd=new PDO('mysql:ho…ion $e){
↵    die($e->getMessage());
↵}
↵    
↵?>"}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure during parsing for http://localhost:4200/assets/php/test.php"name: "HttpErrorResponse"ok: falsestatus: 200statusText: "OK"url: "http://localhost:4200/assets/php/test.php"__proto__: HttpResponseBase
defaultErrorLogger @ core.es5.js:1020
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:186
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:126
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:495
invokeTask @ zone.js:1536
globalZoneAwareCallback @ zone.js:1562
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:16
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1
zone.js:2975 POST http://localhost:4200/assets/php/test.php 404 (Not Found)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:19
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1
core.es5.js:1020 ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/assets/php/test.php", ok: false, …}error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot POST /assets/php/test.php</pre>↵</body>↵</html>↵"headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for http://localhost:4200/assets/php/test.php: 404 Not Found"name: "HttpErrorResponse"ok: falsestatus: 404statusText: "Not Found"url: "http://localhost:4200/assets/php/test.php"__proto__: HttpResponseBase
defaultErrorLogger @ core.es5.js:1020
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:186
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:126
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:495
invokeTask @ zone.js:1536
globalZoneAwareCallback @ zone.js:1562
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:19
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1

你可以帮帮我吗？

php angular httpclient
2个回答
0
投票

你正在向运行你的服务器发出请求Angular项目它能够在你的资产文件夹中找到test.php，因为那里有一个名为test.php的文件，你的服务器将其视为资产文件，如图像文件但是以防万一邮件请求你服务器没有任何回应因此404错误。如果您在Windows或LAMP上尝试安装WAMP，如果您在Mac上以便能够运行PHP文件。您不能以您尝试的方式使用PHP代码。

http.post("http://localhost/assets/php/test.php",{}).subscribe(data =>     { 
 alert(data);
});
0
投票

不要忘记添加到跨域的PHP代码头。 也许它有所帮助，因为它帮助了我：

header('Access-Control-Allow-Origin: *');
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.