如何在Angular 7中使用http发布请求获取数据 [英] How to fetch data using http post request in Angular 7

问题描述

我正在Angular7中处理搜索表单"方案.我使用了http POST插入的http GET，尽管它需要通过使用angular作为前端和spring-boot作为后端从mysql数据库中获取json对象数组.所有后端部分都已实现，由于我使用了Http POST请求，因此我无法将这些数据传递到前端.

I am working on a "Searching Forms" scenario in Angular7. I have used http POST insted http GET although it needs to fetch an json object arrays from mysql database by using angular as frontend and spring-boot as backend. All the backend part is implemented and I'm having trouble to get those data to front end because i have used Http POST request.

我也尝试使用Http GET.但是我需要传递一个json嵌套对象.所以我用了POST.

I tried to use Http GET too. But i need to pass an json nested object. So i used POST.

这是我的Spring Boot后端代码:

This is my Spring boot Backend code:

SearchOutput[] search_output;
@PostMapping(value="/service")
@CrossOrigin(origins = "http://localhost:4200",allowedHeaders = "*")
public ArrayList<SearchOutput> SearchContract(@RequestBody SearchContract search_input) throws InterruptedException {


    rooms_adults[] rooms_adults2 = search_input.getRooms_adults();
    ArrayList<SearchOutput> OutputArray = new ArrayList<SearchOutput>();
    SearchOutput singleOutput;
    List<Integer> hotel_ids ;

    for (rooms_adults r_a : rooms_adults2) {

        hotel_ids= trueContdao.getHotelId(search_input.getCheck_in_date(), search_input.getCheck_out_date());

        for (int id:hotel_ids){
            List<Room_Type> roomTypes = roomTypedao.getHotelRoomType(id,r_a.getTotal_rooms(), r_a.getTotal_adults());

            for(Room_Type room:roomTypes){
                singleOutput=new SearchOutput(hotelContdao.getHotelName(room.getHotel_id()),room.getRoom_type(), (float) (room.getPrice()*search_input.getTotal_nights()*r_a.getTotal_adults()*r_a.getTotal_rooms()*1.15));
                OutputArray.add(singleOutput);
            }
        }

    }

    return OutputArray;

}

我的前端代码是

import { Injectable } from '@angular/core';
import { HttpClient ,HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { SearchOutput } from './SearchOutput.model';


@Injectable({
providedIn: 'root'
})
export class SearchService {

uri = 'http://localhost:9090/tickets';

searchOut: SearchOutput[]

reqHeader = new HttpHeaders({ 'Content-Type': 'application/json','No-Auth':'True' });

constructor(private http: HttpClient) { }

postSearch(SearchData){

return this.http.post<any>(this.uri+'/service',SearchData);

}

}

SearchOutput.model.ts是:

SearchOutput.model.ts is:

export class SearchOutput {
hotel_name: string;
room_type: string;
price: Float32Array;
}

请帮助.预先感谢

推荐答案

1)订阅请求

2)将请求标头作为第三个参数传递到httpOptions中，请参考 http

2) Pass the request headers as third parameter inside httpOptions, refer http

3)使用Proxy.config启用cors，以获取托管在不同主机(HttpVerb +主机名+端口)上的服务的响应，请参考

3) Use Proxy.config to enable cors, to get the response of service hosted on different host(HttpVerb+hostname+port), refer Proxy Configuration

这篇关于如何在Angular 7中使用http发布请求获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！