Angular4 不发送发布数据 [英] Angular4 doesn't send post data

问题描述

Angular HttpClient 不向控制器发送数据.当我尝试执行 fun() 时，我收到错误 500(因为控制器中的用户名为空).

Angular HttpClient doesnt send data to controller. I get a error 500 (because username in controller is null) when i try to execute fun().

test.sevice.ts

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

import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestService {

private EndPointUrl = 'http://127.0.0.1:8080/api/test';

constructor(public http: HttpClient){}

fun(){
   this.test().subscribe((data)=>console.log(data));
  }

test(): Observable<string>{
   let params = new URLSearchParams();
   params.append("grant_type",'password');
   params.append('username', 'Name');

   let body = params.toString();

   let headers = new HttpHeaders();
   headers.set('Content-Type', 'application/x-www-form-urlencoded');

   return this.http.post<string>(this.EndPointUrl,  body);
  }
}

package.json

 ...
"dependencies": {
"@angular/common": "4.3.4",
"@angular/compiler": "4.3.4",
"@angular/compiler-cli": "4.3.4",
"@angular/core": "4.3.4",
"@angular/forms": "4.3.4",
"@angular/http": "4.3.4",
"@angular/common/http": "4.3.4",
"@angular/platform-browser": "4.3.4",
"@angular/platform-browser-dynamic": "4.3.4",
...},

Spring MVC 控制器:

Spring MVC Controller:

@RequestMapping(value="/test", 
                method = RequestMethod.POST,
                produces=MediaType.APPLICATION_JSON_VALUE)
public String[] test(HttpServletRequest request){
    Map<String, String[]> parameters = request.getParameterMap();
    return parameters.get("username");
}

来自 postMan 的请求有效，并返回一些用户名.

Request from postMan works, and returns some username.

有人知道我做错了什么吗?

Does anyone know what I'm doing wrong?

推荐答案

我能看到的是你使用的 HttpClient 不正确......因为它来自 angular 4.3.* 并且与旧的 Http ..

What i can see is you're using HttpClient not correctly ... cause it came in angular 4.3.* and is little bit different from the old Http ..

你不必再做.json() ..例如:

you don't have to do anymore .json() ..so for example:

    return this.http.post<string>(this.EndPointUrl,  body) //<-- IT DON'T NEED HEADERS F.. ITKNOWS IT'S A application/x-www-form-urlencoded
       .map((resp) => {
    return resp;  //<-- HERE resp is your resp.json()
    })
       .catch((err)=>{
console.log(err);
}); }

然后是您的帖子:

                let dataForm = new URLSearchParams();


                dataForm.append('userName', "MyUserName");

                let body = dataForm.toString();

   return this.http.post<string>(this.EndPointUrl,  body) //<-- IT DON'T NEED HEADERS F.. ITKNOWS IT'S A application/x-www-form-urlencoded
           .map((resp) => {
        return resp;  //<-- HERE resp is your resp.json()
        })
           .catch((err)=>{
    console.log(err);
    }); }

这篇关于Angular4 不发送发布数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！