Question

我需要在Ionic 2应用程序中实现登录。现在我只需要确保正确接收电子邮件和密码并获得基本响应。

我已经成功测试了对API的GET请求并且它正常工作，但我无法使POST请求正常工作。

我尝试了两种方法：

使用subscribe：

登录组件：

submitLogin() 
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.makeLogin(email, password);    
}

服务

makeLogin(email: string, password: string) 
{
    var body = JSON.stringify({
        email: email,
        password: password
    });

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    this.http
        .post(this.loginUrl, body, { headers: headers })
        .subscribe(data => {
                    console.log('login API success');
                    console.log(data);
                }, error => {
                    console.log(JSON.stringify(error.json()));
        });
}

API （codeIgniter）:(代码至少用于测试目的）

public function testLoginIonic2()
{
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

    $account_email  = $this->input->post('email');
    $account_password   = $this->input->post('password');

    echo json_encode($account_email);
}

结果：

与服务器的连接似乎没问题 - 但没有返回数据 - 响应正文为空

使用Promise：

登录组件：

submitLogin() 
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.testLogin(email, password)
            .then(data => {
                console.log('response data');
                console.log(data);
            }); 
}

服务

testLogin(email: string, password: string): Promise<any> 
{
    var body = JSON.stringify({
        email: email,
        password: password
    });

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    return this.http
        .post(this.loginUrl, body, {headers: headers})
        .toPromise()
        .then(res => res.json().data);
}

API：与之前相同

结果：

我收到此错误消息：Unexpected end of JSON input（可能是因为响应为空，因此不是JSON格式）。

为什么我得到一个空的回复？

表格正常运作。错误不在那里。

所以请求中肯定有问题，但是什么？

修改

使用Postman测试似乎参数为空。可能他们没有正确发送。

Answer 1

感谢您的回复。

@hgoebl的回答是正常的。

我使用URLSearchParams找到了一个更简单的解决方案：

<强>组件：

submitLogin() 
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.makeLogin(email, password)
        .subscribe((response) => {
            console.log(response);
        }, (error) => {
            console.log(error);
        });
}

<强>服务：

makeLogin(email: string, password: string) 
{       
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', email);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    return this.http
        .post(this.loginUrl, body, { headers: headers })
        .map(response => response.json())
}

请注意，必须在服务中导入URLSearchParams：

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

修改：

我在组件内部移动了订阅，以便能够处理组件内的响应数据。

Answer 2

对我而言，如果问题是以错误的格式发送开始的话。您告诉服务器它的内容是application/x-www-form-urlencoded，但您发送的是JSON。

你可以试试这个：

testLogin(email: string, password: string): Promise<any> 
{
    var headers = new Headers();
    headers.append('Content-Type',
        'application/x-www-form-urlencoded; charset=UTF-8');

    let params = {email, password};
    let body = this.toFormUrlEncoded(params);

    //... your post request
}

private toFormUrlEncoded(object: Object): string {
    return Object.keys(object)
        .map(key => {
            return encodeURIComponent(key) + '=' + 
                   encodeURIComponent(object[key]);
        })
    .join('&');
}

作为替代方案，您还可以将内容类型更改为JSON，并将服务器更改为解码JSON。

Answer 3

map之后你不应该http.post吗？

this.http
    .post(this.loginUrl, body, { headers: headers })
    .map(response => response.json())
    .subscribe(data => {
        console.log('login API success');
        console.log(data);
    }, e => {
         console.log(e);
    });

您对observables的回复看起来没问题，但没有解析。

Ionic 2 - 如何发出登录帖子请求？

3 个答案: