tiktok นับยอดวิวยังไง

ในการรับค่า post ใน Angular เราสามารถใช้บริการ HttpClient ของ Angular ได้

HttpClient เป็นคลาสที่ช่วยให้เราสามารถส่งและรับ HTTP requests ได้ โดยเราสามารถใช้ post() method ของ HttpClient เพื่อส่ง HTTP POST request ได้

ตัวอย่างการรับค่า post ใน Angular

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Angular Post Request';
  name = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Send a POST request
    this.http.post('/api/post', { name: 'Bard' })
      .subscribe(
        response => {
          // Get the response data
          this.name = response.data.name;
        },
        error => {
          // Handle the error
          console.log(error);
        }
      );
  }

}

โค้ด HTML

<h1>{{ title }}</h1>
<p>Your name: {{ name }}</p>

Output

เมื่อเราเรียกใช้แอปพลิเคชัน Angular ครั้งแรก จะมีข้อความ “Angular Post Request” ปรากฏขึ้น

เมื่อเราคลิกลิงก์ “Send POST Request” แอปพลิเคชันจะส่ง HTTP POST request ไปยัง URL /api/post พร้อมข้อมูลชื่อ “Bard”

เมื่อได้รับ response จากเซิร์ฟเวอร์ แอปพลิเคชันจะแสดงชื่อ “Bard” ใน HTML

วิธีอื่นในการรับค่า post ใน Angular

นอกจากการใช้ HttpClient แล้ว เรายังสามารถใช้ FormData object เพื่อส่งค่า post ได้

FormData object เป็น object ที่ช่วยให้เราสามารถเก็บข้อมูลในรูปแบบของ key-value pair ได้

ตัวอย่างการรับค่า post ใน Angular โดยใช้ FormData object

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Angular Post Request';
  name = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Create a FormData object
    const formData = new FormData();
    formData.append('name', 'Bard');

    // Send a POST request
    this.http.post('/api/post', formData)
      .subscribe(
        response => {
          // Get the response data
          this.name = response.data.name;
        },
        error => {
          // Handle the error
          console.log(error);
        }
      );
  }

}

โค้ด HTML

<h1>{{ title }}</h1>
<p>Your name: {{ name }}</p>

Output

ผลลัพธ์จะเหมือนกับตัวอย่างก่อนหน้านี้