代码段

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}`);
    }
}

在上面，app.component.ts中的saveUser函数。它在点击按钮上执行警报。在saveUser函数上，我想调用POST请求。我该怎么做？

Answer 1

您可以通过调用服务（使用<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;"> <div id="tbl"> <div id="spacer"></div> <div id="row"> <div id="a" class="title">1</div> <div id="a-choose"> </div> <div id="empty"></div> <div id="b-choose"> </div> <div id="b" class="title">2</div> </div> <div id="spacer"></div> <div id="row"> <div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div> <div id="a-choose" style="border:1px solid #dc6210;"> <div id="a-left"> <div id="block" style="">a</div> <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div> <div id="block" style="">a</div> </div> </div> <div id="empty" style="background-color: transparent;"> </div> <div id="b-choose" style="border:1px solid #dc6210;"> <div id="b-left"> <div id="block" style="">b</div> <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div> <div id="block" style="">b</div> </div> </div> <div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div> </div> <div id="spacer"></div> </div> </div>请求）来保存用户，如下面的示例。

POST

Answer 2

@Nitzan是正确的，因为在你进行POST调用时需要运行一个servlet。

我一直致力于一个涉及Angular2前端和后端Java RESTful服务的项目。您可以看到我对这个问题的回答是如何构建的：how to integrate Angular 2 + Java Maven Web Application

对于我的项目，我在netbeans中启动了tomcat servlet（版本8.0.27），它也为我的应用程序提供服务。这可以确保当用户到达该点时，服务器会监听应用程序发出的特定请求。

代码段

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.
    }
}

Angular2打字稿POST请求

2 个答案:

代码段

这个.ts文件大部分来自Angular Developer guide，这归功于作者。