如何在 Angular 4 中发出非 ajax HTTP Post 请求答案

【问题标题】：How to make a non-ajax HTTP Post Request in Angular 4如何在 Angular 4 中发出非 ajax HTTP Post 请求
【发布时间】：2019-03-20 06:10:03
【问题描述】：

我的问题很简单...如何使用角度 4 的参数创建帖子 HttpRequest。我找不到示例...我找到的示例使用的是 HttpClient，但这不是我需要的

【问题讨论】：

HttpClient 有什么问题？
我需要一个非 ajax 发布请求...完全是一个完整的发布请求
@Igor 我需要将我的应用程序流重定向到外部服务以支付产品.. 外部服务允许我为不同的支付方式进行支付。出于这个原因，我需要一个非 ajax 帖子
How to redirect to an external URL in Angular2? 的可能重复项。 (window.location.href = '...';)
@Igor 是的！我想做一个浏览器重定向

标签： javascript angular typescript http

【解决方案1】：

如果没有 XHR 或 fetch（又名 AJAX），您将无法指示浏览器发出 HTTP POST 请求。通过导航到某个 URL，浏览器会发出 HTTP GET 请求。

如果您想直接从浏览器发送 HTTP POST 请求，则需要使用 XHR/fetch。

【讨论】：

fetch 是一个选项。
@jhpratt 是的，但是 fetch 在后台使用 XHR。
是吗？我的印象是它完全是一个独立的东西（尽管 polyfills 肯定会使用它）。无论如何，这是语义。
@jhpratt，其实我认为你是对的。它们可能是两个不同的东西。
@RaphaelRafatpanah 如何在 Angular 4 中使用 XHR/fetch？

【解决方案2】：

回到这一点，虽然我设法使用 HttpRequest 类使用 get 方法创建了一个测试，但我在使用 POST 方法时遇到了问题。相反，我使用了来自 @angular/http 的 HttpModule 和随附的类。然后我尝试添加一个 e.preventDefault。试试看它是否适合你。此外，您可能需要在此处使用纯 JS 方法。

在应用程序组件中

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
import { Component, OnInit } from "@angular/core";

export class AppComonent implements OnInit {

dataBody =JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
  });

  headers;
  requestOptions;
  requestMethod;
  Response;


  constructor(private http: Http) {}

  ngOnInit(
  ) {


  }
onPreventDefault(e){
  e.preventDefault();
}
onPostData(){
  return this.postRequest('https://jsonplaceholder.typicode.com/posts', this.dataBody);
}

 postRequest(url,data) {
    this.headers = new Headers();
    this.headers.append("Content-Type", 'application/json');

    this.requestOptions = new RequestOptions({
        method: RequestMethod.Post,
        url: url,
        headers: this.headers,
        body: data
    });

    return this.http.request(new Request(this.requestOptions))
        .subscribe((res: Response) => {
            if (res) {
              console.log(res);

            }
        });
}


}

在module.ts中

import { HttpModule } from '@angular/http';

imports: [HttpModule];

在 app-component.html 中

 <form (ngSubmit)="onPostData()" (submit)="onPreventDefault($event)" target="_blank" action="http://localhost:3000/api/users" >
  <button type="submit" >Submit</button>
  </form>

【讨论】：

【解决方案3】：

在app.module.ts

import { HttpClientModule } '@angular/common/http';

@NgModule ({
imports: [HttpClientModule]
})

在 app.component.ts 中

import { HttpClient } from '@angular/common/http';

export class AppComponent {
   constructor(private http: HttpClient) {
        this.http.post('http://someurl/endpoint', {postData1: 'avb', postdat2: 'xyx}).subscribe(res => console.log(res), error => console.log(error));
   }

}

【讨论】：

作者询问在post请求中提供参数，除了它在HttpClient你没有回答问题。