Angular2 машинописный запрос POST

Question

Я тестирую этот образец: http://plnkr.co/edit/WTu5G9db3p4pKzs0WvW6?p=preview.

Этот код реализует форму для входа с именем, почтой, профилем. При нажатии кнопки «Отправить» на дисплее появляется предупреждение с полями имени и электронной почты.

saveUser() { 
    if (this.userForm.dirty && this.userForm.valid) { 
     alert(`Name: ${this.userForm.value.name} Email: ${this.userForm.value.email}`); 
    } 
} 

На выше, функция saveUser в app.component.ts. Он запускает предупреждение при нажатии кнопки. В функции saveUser я хотел бы вызвать запрос POST. Как мне это сделать?

Answer 1

Вы можете сохранить пользователей, позвонив по этой услуге (используя запрос POST), как показано ниже: Образец.

var headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
this.http.post('http://www.syntaxsuccess.com/poc-post/', 
         JSON.stringify({firstName:'Joe',lastName:'Smith'}), 
         {headers:headers}) 
.map((res: Response) => res.json()) 
.subscribe((res:Person) => this.postResponse = res); 

Answer 2

@Nitzan верен тем, что к моменту совершения POST-вызова должен быть сервлет, уже запущенный.

Я работаю над проектом, который включает интерфейс Angular2 и службу RESTful Java для задней части. Вы можете увидеть, как я построил свой ответ на этот вопрос: how to integrate Angular 2 + Java Maven Web Application

Для моего проекта я запускаю сервлет tomcat (версия 8.0.27) внутри netbeans, который также служит для моего приложения. Это гарантирует, что сервер будет прослушивать конкретные запросы, сделанные приложением, когда пользователь доберется до этой точки.

фрагменты кода

data.service.ts

Большая часть этого .ts файл пришел из Angular Developer guide, заслуга автора этого.

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class DataService { 
    constructor (private http: Http) {} // Inject Http client Service 
    private baseListUrl: string = 'bar/request?id='; 

    sendInput (input: string) { 
     let uInput = JSON.stringify({input}); 
     let header = new Headers({'Content-Type': 'MIMETYPE/HERE'}); 
     let options = new RequestOptions({ headers: headers}); 

     this.http.post(this.baseListUrl.concat(input), uInput, options) 
         .map(this.extractData) 
         .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     // alert("body: " + body); 
     return body.docs || {}; 
    } 

    private handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
} 

foo.java

@Path("bar") 
public class Baz{ 

    @POST 
    @Path("/request") 
    @Consumes(Mediatype.MIMETYPE_HERE) 
    public Response doWhatYouNeed(string input) { 
     // I don't have the exact code for you, but this should serve as a good starting point. 
    } 
}