onlinecode

Angular 9/8 Ajax Get and Post Requests Example

Angular 9/8 Ajax Get and Post Requests Example

In this post we will give you information about Angular 9/8 Ajax Get and Post Requests Example. Hear we will give you detail about Angular 9/8 Ajax Get and Post Requests ExampleAnd how to use it also give you demo for it if it is necessary.

In this post, we’ll create a simple example with Angular 9/8 and HttpClient that sends Ajax Get and Post requests to fetch and post data from/to a backend server.

The server can be either your own server or a third-party server.

In our case, we’ll be using a third-party server.

We assume you already have a project ready and Angular CLI installed.

You can also simply use the online Stackblitz IDE if you just want to experiment with the code and don’t want to set up a development environment for Angular, yet!

What is Ajax?

Ajax stands for Asynchronous JavaScript and XML. It is used to request data from the server without full-page refresh, and use the result, which was originally XML, to re-render a part of the page.

Nowadays, Ajax refers to any asynchronous request sent to a server from a JavaScript. Mostly the response is JSON, or HTML fragments.

Ajax was the first step into building modern single page apps or SPAs.

Modern libraries and frameworks, like Angular, make building SPAs simpler.

Http GET and POST Requests?

The GET method of http is used to retrieve a resource from a server while POST is used to create and update data in the server.

Angular HttpClient?

HttpClient is a built-in service for sending http requests in Angular. It’s built on top of the XMLHttpRequest interface available in modern and legacy web browsers.

Importing HttpClientModule

HttpClientModule is the module that exports the HttpClient service, so you’ll need to import it in your project.

Open the src/app/app.module.ts file and update it as follows:

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppRoutingModule}from'./app-routing.module';import{AppComponent}from'./app.component';import{HttpClientModule}from'@angular/common/http';@NgModule({declarations:[AppComponent,],imports:[BrowserModule,AppRoutingModule,HttpClientModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

We simply need to import HttpClientModule from @angular/common/http and add it to the imports array of NgModule.

Generate an Angular Service

In your terminal, simply execute the following command from inside your project’s folder:

$ ng generate service http

You’ll get the files for your service with some basic code.

Go to the src/app/http.service.ts file and import HttpClient:

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

Next, inject HttpClient using the constructor of your http service:

import{Injectable}from'@angular/core';import{HttpClient}from'@angular/common/http';@Injectable({providedIn:'root'})exportclassHttpService{constructor(privatehttpClient:HttpClient){}}

That’s it! We are ready to send get and post requests in our app.

Sending an Ajax GET Request

Let’s start with defining a service method for sending a get request to the server to fetch some data:

import{Injectable}from'@angular/core';import{HttpClient}from'@angular/common/http';@Injectable({providedIn:'root'})exportclassHttpService{apiUrl="/api/endpoint";constructor(privatehttpClient:HttpClient){}sendGetRequest(){returnthis.httpClient.get(this.apiUrl);}}

Let’s suppose our endpoint returns the following data:

[{id:'1',name:'Product1'},{id:'2',name:'Product2'}]

Sending an Ajax POST Request

Next, let’s define a method for sending a post request:

import{Injectable}from'@angular/core';import{HttpClient}from'@angular/common/http';import{Observable}from'rxjs';@Injectable({providedIn:'root'})exportclassHttpService{apiUrl="/api/endpoint";constructor(privatehttpClient:HttpClient){}sendPostRequest(data:Object):Observable<Object>{returnthis.http.post(this.apiUrl,data);}}

You next need to inject HttpService in your component(s) and call the methods but to actually send the requests to the server you need to subscribe to the RxJS observables returned from the defined methods. For example:

this.httpService.sendGetRequest().subscribe((responseBody)=>{console.log(responseBody);});

This will work provided that you have injected your service as httpService in your component’s constructor.


Hope this code and post will helped you for implement Angular 9/8 Ajax Get and Post Requests Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version