angular4 get，post請求（帶參數，與不帶參數）

一：在app.module.ts引入HttpMoudle

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule  } from '@angular/http';

imports: [
    BrowserModule,
    HttpModule
  ],

二：在對應使用請求的組件的ts中引入

import { Http  , ResponseOptions , Headers  , URLSearchParams } from '@angular/http';

三：在構造函數中注入

constructor( private http: Http ) { }

四：使用get和post請求

①：帶參數的post(必定要使用URLSearchParams進行封裝)

getData() {

    const   d = new URLSearchParams();
    d.append('para',   'value' );
    d.append('para1',   'value' );

  this.http.post(  '地址' ,  d)
  .map(res => res.json()) // (5)
  .subscribe(data => {
     alert(JSON.stringify(data));
  }, err => {
    console.error('ERROR', err);
  });

②：帶參數的get請求

getData() {

    const dates = {
     'str': 123
  };

  this.http.get('地址' , {params: dates})
  .map(res => res.json())
  .subscribe(data => {
    alert(JSON.stringify(data));
  }, err => {
    console.error('ERROR', err);
  });

③：不帶參數的get請求

getData() {
  this.http.get('/hello')
  .map(res => res.json())
  .subscribe(data => {
    alert(JSON.stringify(data));
  }, err => {
    console.error('ERROR', err);
  });

五：後臺接收

@RequestMapping("/hello")
    @ResponseBody
    public String hello(HttpServletRequest req) {
        System.out.print(req.getParameter("str"));
        Gson gson = new Gson();
        String s1= gson.toJson(1);
        return s1;
    }