Ionic 2-如何发出登录请求？ [英] Ionic 2 - How to make a login post request?

问题描述

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

I need to implement login in my Ionic 2 app. For now I just need to be sure that the email and the password are properly received and get back a basic response.

我已经成功测试了对API的GET请求，并且

I have successfully tested a GET request to the API and it is properly working, but I am not able to get the POST request working.

我尝试了两种方法：

1. 使用订阅：

登录组件：

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）：（代码位于最小的测试目的）

The API (codeIgniter): (code at minimum for testing purpose)

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

结果：

与服务器的连接似乎正常-但未返回任何数据-响应的主体为空

The connection to the server seems okay - but no data is returned - the body of the response is empty

使用 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：与以前相同

结果：

我收到此错误消息： JSON输入意外结束（可能是因为响应为空，因此不是JSON格式） 。

I get this error message: Unexpected end of JSON input (probably because the response is empty and thus not in JSON format).

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

该表格正常工作。错误不存在。

The form is properly working. The error is not there.

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

So there must be something wrong in the request, but what?

编辑：

用邮递员测试似乎参数为空。

Testing with Postman it seems that the parameters are empty. Probably they are not properly sent.

推荐答案

感谢您的回复。

@hgoebl的答案正常运行。

The answer from @hgoebl is properly working.

我发现使用 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 必须在服务中导入：

Keep in mind that URLSearchParams has to be imported in the service:

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

编辑：

我将预订移到了组件内部，以便能够处理组件内部的响应数据。

I moved the subscribe inside the component to be able to handle the response data inside the component.

这篇关于Ionic 2-如何发出登录请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！