Question

我的问题很简单...如何制作带有角度4中的参数的帖子HttpRequest。我找不到示例...我发现的示例正在使用HttpClient，但这不是我所需要的

Answer 1

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

}

Answer 2

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

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

Answer 3

回到这一点，尽管我设法使用HttpRequest类使用get方法创建测试，但在使用POST方法时遇到了麻烦。相反，我使用了@ angular / http中的HttpModule及其附带的类。然后，我尝试添加e.preventDefault。尝试一下，看看它是否适合您。另外，您可能需要在此处使用纯JS方法。

在AppComonent中

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>

如何在Angular 4中发出非ajax HTTP发布请求

3 个答案: