订阅 Angular 6 POST 请求
Subscribing to Angular 6 POST request
场景
我有一个 Angular 6 前端与 Spring 引导后端通信。后端使用 PostgreSQL 作为数据库。我想做的是将用户名发送到数据库,然后 return 他的电子邮件并使用 Angular 6 将其打印在页面上。
但是,我正在努力处理 Angular POST 请求,在订阅它时我在 Chrome 开发人员工具中收到 JSON 解析错误。
代码
Spring 开机
这工作正常,因为我已经通过在控制台上打印从数据库中 return 编辑的电子邮件对其进行了测试。
@RequestMapping(value = "/reset", method = RequestMethod.POST)
public String resetMail(@RequestBody String username) {
try{
User user = userService.findByUsername(username);
//System.out.println(user.getEmail()); Testing purpose
return user.getEmail();
}catch(Exception e) {
//e.printStackTrace(); Prints out NullException StackTrace.
return "Not Present";
}
}
Angular 6
在以下代码中,我认为问题出在订阅方法中,因为我在 Chrome 开发人员工具中遇到 JSON 解析错误。
httpOptions = { headers: new HttpHeaders({'Content-Type':'text/plain', 'Access-Control-Allow-Origin': '*'})};
reset(username:string) {
this.http.post('http://localhost:8090/reset', username, this.httpOptions).subscribe(data=> {
this.email = data as any;
});
}
console.log(this.email) // Prints undefined
错误
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8090/reset", ok: false, …}
>error: {error: SyntaxError: Unexpected token a in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "abcdefg@yahoo.com"}
>headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:8090/reset"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8090/reset"
您想将字符串序列化为 JSON。如果您的控制器 return 对象, @RestController
注释将正确序列化它。如果你想 return 只是一个字符串,你必须 return JSONObject.quote(user.getEmail())
;您可以从这里 JSONObject 依赖项 http://mvnrepository.com/artifact/org.json/json
但我鼓励您总是 return 对象作为您的其余控制器的响应。
场景
我有一个 Angular 6 前端与 Spring 引导后端通信。后端使用 PostgreSQL 作为数据库。我想做的是将用户名发送到数据库,然后 return 他的电子邮件并使用 Angular 6 将其打印在页面上。 但是,我正在努力处理 Angular POST 请求,在订阅它时我在 Chrome 开发人员工具中收到 JSON 解析错误。
代码
Spring 开机
这工作正常,因为我已经通过在控制台上打印从数据库中 return 编辑的电子邮件对其进行了测试。
@RequestMapping(value = "/reset", method = RequestMethod.POST)
public String resetMail(@RequestBody String username) {
try{
User user = userService.findByUsername(username);
//System.out.println(user.getEmail()); Testing purpose
return user.getEmail();
}catch(Exception e) {
//e.printStackTrace(); Prints out NullException StackTrace.
return "Not Present";
}
}
Angular 6
在以下代码中,我认为问题出在订阅方法中,因为我在 Chrome 开发人员工具中遇到 JSON 解析错误。
httpOptions = { headers: new HttpHeaders({'Content-Type':'text/plain', 'Access-Control-Allow-Origin': '*'})};
reset(username:string) {
this.http.post('http://localhost:8090/reset', username, this.httpOptions).subscribe(data=> {
this.email = data as any;
});
}
console.log(this.email) // Prints undefined
错误
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8090/reset", ok: false, …}
>error: {error: SyntaxError: Unexpected token a in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "abcdefg@yahoo.com"}
>headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:8090/reset"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8090/reset"
您想将字符串序列化为 JSON。如果您的控制器 return 对象, @RestController
注释将正确序列化它。如果你想 return 只是一个字符串,你必须 return JSONObject.quote(user.getEmail())
;您可以从这里 JSONObject 依赖项 http://mvnrepository.com/artifact/org.json/json
但我鼓励您总是 return 对象作为您的其余控制器的响应。