How to make a non-ajax HTTP Post Request in Angular 4

Question

My question is very simple... How can make an Post HttpRequest with params in angular 4. I could not find an example ... the examples I find are using HttpClient, but it's not what I need

Answer 1

Without XHR or fetch (aka AJAX), you're not able to instruct the browser to make an HTTP POST request. By navigating to some URL, the browser makes a HTTP GET request.

If you want to send an HTTP POST request directly from the browser, you'll need to use XHR/fetch.

Answer 2

Circling back to this, although I managed to create a test with a get method using the HttpRequest class I was having trouble with using the POST method. Instead I used the HttpModule from @angular/http and the accompanying classes. Then I tried adding an e.preventDefault. Try that and see if it works for you. Additionally you may need to use pure JS methods here.

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

            }
        });
}


}

in module.ts

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

imports: [HttpModule];

in app-component.html

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

Answer 3

in app.module.ts

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

@NgModule ({
imports: [HttpClientModule]
})

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

}