Question

我应该从Angular 6表单中发送一些与Postman中配置相同的数据（我发送完整配置的屏幕截图：如您所见，我选择的选项是raw / Json）。

我尝试了以下示例，但由于收到“错误请求400”错误消息而无法使用，您能帮我吗？谢谢大家！

这是我的无效代码：

public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        /*
        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        JSON.stringify(transferObject);
        */

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: userLangKey
        })
        .subscribe(
            res => {
            console.log(res);
        },
            err => {
            console.log("Error occured");
        }

      );
    }

我也尝试以这种方式编辑代码，但收到相同的错误：

(...)

const httpOptions = {
            headers: new HttpHeaders({
              'Content-Type':  'application/json'
            })
        }; 

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: userLangKey
            }, httpOptions)

        .subscribe(
            res => {
            console.log(res);
            },
            err => {
            console.log("Error occured");
            }

(...)

Answer 1

我不太确定您的表单是如何构建的，因此在此示例中，我假设您正在使用ngModel或您已经从表单中提取了所需的值。

let l = 'test';
let p = 'pass';
let lk = 'en'

const transferObject = {
  login: l,
  password: p,
  langKey: lk
}

const object JSON.stringify(transferObject);

// requires injecting HttpClient in constructor
this.http.post<object>('http://myurl.com', string);

然后在接收端，您可以撤消此操作以使您的对象恢复原状，

let string = // receive your string
const receivedObject = JSON.parse(string)

您可以在此处了解有关Javascript / Typescript JSON函数的更多信息：https://www.w3schools.com/js/js_json_stringify.asp

Answer 2

请使用第三个参数为此发布请求设置标题。

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};    
this.http.post<Hero>(this.heroesUrl, hero, httpOptions)

Answer 3

我尽力解决了问题；考虑到我在这里发布的上一个代码版本，所有代码都是正确的，而曾经的问题只是被激活。在前面的http行中，我仅定义了这一点。在此行的末尾“ .subscribe（blablabla）”足以激活该功能。仅此命令；没有其他的。谢谢;我复制下面的正确代码。希望对其他人有用。

public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        let header:HttpHeaders = new HttpHeaders().set('Content-Type', 'application/json');

        const object = JSON.stringify(transferObject);
        const self = this;  

                //Here is the point!
        return self.httpClient.post(PathService.authPath()+'register', object, {headers: header}).subscribe((response: Response) => {

            this.helperService.snackBarWarning('all works correctly');
        });
    }

角度：从表单发送数据（带有Raw / json选项）

3 个答案: