Javascript 使用angular从服务器端php文件获取json数据？

我使用纯javascript从php脚本服务器端获取数据，但我想使用angular进行尝试

这段代码获取一个php文件，该文件依次查询数据库simple select with filter等，并返回一个json文件供脚本使用，然后显示

有没有一个简单的方法来处理这个问题

这就是现在的脚本

fetch('service/select.php')
.then(function(response) {
    return response.json();
})
.then(function(data) {
    //do something with the data
});

这是它获取的php文件：

<?php
require_once("config.php");
    mysqli_set_charset($con, 'utf8mb4');
    mysqli_query($con, "SET NAMES 'utf8mb4'");
    $rs = mysqli_query($con, "select * from names");
    while($row = mysqli_fetch_assoc($rs)) {
        $res[] = $row;
    }
    echo json_encode($res, JSON_UNESCAPED_UNICODE);
?>

我知道php文件容易受到sql注入的攻击，它只是一个快速查询数据的示例文件，不用于生产

HTTPClient模块是您需要的

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
};
@Injectable()
export class DataService{
    constructor(private http:HttpClient){  }
    
    Post(url:string,body:any): Observable<any>{
        return this.http.post<any>(url, body, httpOptions).pipe( retry(1), catchError(this.handleError) );
    }
    Get(url:string): Observable<any>{
        return this.http .get<any>(url, httpOptions).pipe( retry(1), catchError(this.handleError) );
    }
    private handleError(error: any){
        let body = error.json();     
        return body || {};
    }
}

HTTPClient模块是您需要的

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
};
@Injectable()
export class DataService{
    constructor(private http:HttpClient){  }
    
    Post(url:string,body:any): Observable<any>{
        return this.http.post<any>(url, body, httpOptions).pipe( retry(1), catchError(this.handleError) );
    }
    Get(url:string): Observable<any>{
        return this.http .get<any>(url, httpOptions).pipe( retry(1), catchError(this.handleError) );
    }
    private handleError(error: any){
        let body = error.json();     
        return body || {};
    }
}

Angular提供了执行HTTP请求的API。这个API的响应类型是RxJS的可观察类型，它有许多内置的方法来 处理你的数据

您可以按如下方式执行HTTP请求代码，而不是使用fetch API

constURL='service/select.php'； consthdrs=newhttpheaders{'Accept'：Accept？Accept:'application/json；charset=utf-8'}； this.http.geturl，{headers:hdrs，observe:'body'，responseType:'json'} 订阅 data=>//做任何你想做的事情 err=>//在此处获取错误响应 ; Angular提供了执行HTTP请求的API。这个API的响应类型是RxJS的可观察类型，它有许多内置的方法来 处理你的数据

您可以按如下方式执行HTTP请求代码，而不是使用fetch API

constURL='service/select.php'； consthdrs=newhttpheaders{'Accept'：Accept？Accept:'application/json；charset=utf-8'}； this.http.geturl，{headers:hdrs，observe:'body'，responseType:'json'} 订阅 data=>//做任何你想做的事情 err=>//在此处获取错误响应 ;

---

同样，只需使用httpClient。同样，只需使用httpClient。