Dapatkah javascript mengirim data ke server?

Demikian pula, ada berbagai cara untuk mengirim data bersama dengan permintaan API sampai ke server. Anda dapat mengirimkannya melalui parameter string kueri atau badan permintaan. Keputusan tergantung pada metode permintaan

Pada bagian ini, mari kita lihat bagaimana dan di mana Anda harus menggunakan parameter kueri dan badan permintaan untuk mengirim data kembali ke server

Parameter String Kueri

Ini adalah cara paling umum untuk mengirim data ke server. Parameter string kueri memperluas URL dasar API dengan menambahkan string kueri di bagian akhir yang mencakup pasangan bidang/nilai. String kueri adalah string yang dimulai dengan ? dan menyertakan parameter yang dicantumkan satu demi satu, dipisahkan oleh &. Contoh string kueri terlihat seperti ini

Copy
​​?guests=3&days=2&time=1400

Jalur parameter string kueri tidak masalah. Anda dapat mengaturnya saat Anda pergi

Parameter kueri tidak terbatas pada permintaan GET. Anda dapat menambahkannya ke semua jenis metode permintaan API, termasuk POST, DELETE, PATCH, dll

Mengirim data sensitif seperti kunci API, kredensial pengguna, dll dianggap praktik yang buruk. , melalui parameter kueri. Jika permintaan API terganggu di tengah, data akan diekspos ke semua orang

Badan Permintaan

Parameter badan permintaan digunakan saat klien mengirim data ke API. Umumnya, parameter dikirimkan dalam Objek JSON dalam permintaan POST, PUT, atau PATCH

Objek JSON termasuk dalam isi permintaan, jadi parameter ini disebut parameter isi permintaan. Titik akhir tetap sederhana, seperti /hotels/find, tetapi Anda dapat menyertakan objek JSON dengan banyak pasangan kunci-nilai di badan permintaan

Meskipun parameter badan permintaan masih digunakan, mereka tidak lagi dianggap sebagai parameter di OpenAPI v3. 0

Menggunakan Fetch API Untuk Mengirim Data melalui Parameter Kueri

Anda harus memiliki Node kecil. js server diatur untuk mengikuti. Untuk ini, Anda dapat merujuk ke panduan ini, di mana kami berbicara tentang cara membuat Node. js server dalam beberapa menit

→ LANGKAH #1

Saya menganggap Anda telah menyiapkan Node. js server. Lanjutkan dan jalankan di port 5500

→ LANGKAH #2

Buat direktori di komputer Anda dan buka di editor kode pilihan Anda. Setelah selesai, buat file HTML bernama index.html di dalam direktori ini. Sekarang tulis boilerplate HTML dasar. Saya juga telah menyediakannya di bawah ini yang dapat Anda salin dan tempel

Copy
		
		
		
Send Data via Query Parameter

→ LANGKAH #3

Kami akan mengirimkan permintaan dapatkan ke server menggunakan pengambilan. Dalam permintaan, kami akan menambahkan beberapa parameter kueri API

Copy
			const res = await fetch('http://localhost:5500/hello?name=John', {
					'Content-Type': 'application/json'

Anda dapat melihat bahwa API berisi parameter kueri name

Menggunakan Fetch API Untuk Mengirim Data melalui Badan Permintaan

Semua langkah sampai langkah #2 akan tetap sama. Yang perlu Anda lakukan hanyalah menambahkan objek tubuh di panggilan API dan mengubah metode permintaan ke POST

Copy
			const res2 = fetch('http://localhost:5500/hello?name=John', {
					'Content-Type': 'application/json'

Pada permintaan API di atas, Anda dapat melihat bahwa ada objek tubuh yang mengambil string. Oleh karena itu saya telah merangkai objek

JavaScript memiliki modul dan metode hebat untuk membuat permintaan HTTP yang dapat digunakan untuk mengirim atau menerima data dari sumber daya sisi server. Pada artikel ini, kita akan melihat beberapa cara populer untuk membuat permintaan HTTP dalam JavaScript

Ajax

Ajax adalah cara tradisional untuk membuat permintaan HTTP asinkron. Data dapat dikirim menggunakan metode HTTP POST dan diterima menggunakan metode HTTP GET. Mari kita lihat dan buat permintaan GET. Saya akan menggunakan JSONPlaceholder, API REST online gratis untuk developer yang mengembalikan data acak dalam format JSON

Untuk melakukan panggilan HTTP di Ajax, Anda perlu menginisialisasi metode XMLHttpRequest() baru, tentukan titik akhir URL dan metode HTTP (dalam hal ini GET). Terakhir, kami menggunakan metode open()_ untuk mengikat metode HTTP dan endpoint URL bersama-sama dan memanggil metode

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kami mencatat tanggapan HTTP ke konsol dengan menggunakan properti

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Jika Anda melihat konsol browser Anda, itu akan mengembalikan Array data dalam format JSON. Tapi bagaimana kita tahu jika permintaan itu dilakukan?

Properti

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Jika

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Selain langsung melakukan panggilan Ajax dengan JavaScript, ada metode lain yang lebih kuat untuk melakukan panggilan HTTP seperti

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

metode jQuery

jQuery memiliki banyak metode untuk menangani permintaan HTTP dengan mudah. Untuk menggunakan metode ini, Anda harus menyertakan pustaka jQuery di proyek Anda

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$. ajax

jQuery Ajax adalah salah satu metode paling sederhana untuk melakukan panggilan HTTP

$. metode ajax membutuhkan banyak parameter, beberapa di antaranya diperlukan dan lainnya opsional. Ini berisi dua opsi panggilan balik

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

npm install axios --save

$. dapatkan metode

$. metode get digunakan untuk mengeksekusi permintaan GET. Dibutuhkan dua parameter. titik akhir dan fungsi callback

$. pos

Metode

npm install axios --save

npm install axios --save

$. getJSON

Metode

npm install axios --save

npm install axios --save

jQuery memiliki semua metode ini untuk meminta atau mengirim data ke server jarak jauh. Tapi Anda sebenarnya bisa menggabungkan semua metode ini menjadi satu. metode

npm install axios --save

mengambil

npm install axios --save

npm install axios --save

npm install axios --save

Fungsi

npm install axios --save

import axios from 'axios'

Seperti yang Anda lihat,

npm install axios --save

Aksioma

Axios adalah pustaka sumber terbuka untuk membuat permintaan HTTP dan menyediakan banyak fitur hebat. Mari kita lihat cara kerjanya

Penggunaan

Pertama, Anda harus menyertakan Axios. Ada dua cara untuk memasukkan Axios ke dalam proyek Anda

Pertama, Anda bisa menggunakan npm

npm install axios --save

Maka Anda perlu mengimpornya

import axios from 'axios'

Kedua, Anda dapat menyertakan axios menggunakan CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Membuat Permintaan dengan axios

Dengan Axios Anda dapat menggunakan GET dan

import axios from 'axios'

MENDAPATKAN

import axios from 'axios'

POS

Axios mengembalikan “Janji. ” Jika Anda terbiasa dengan janji, Anda mungkin tahu bahwa janji dapat mengeksekusi banyak permintaan. Anda dapat melakukan hal yang sama dengan axios dan menjalankan beberapa permintaan secara bersamaan

Axios mendukung banyak metode dan opsi lain. Anda dapat menjelajahinya di sini

Sudut HttpClient

Angular memiliki modul HTTP sendiri yang berfungsi dengan aplikasi Angular. Itu menggunakan pustaka RxJS untuk menangani permintaan asinkron dan menyediakan banyak opsi untuk melakukan permintaan HTTP

Melakukan panggilan ke server menggunakan Angular HttpClient

Untuk membuat permintaan menggunakan Angular HttpClient, kita harus menjalankan kode kita di dalam aplikasi Angular. Jadi saya membuat satu. Jika Anda tidak terbiasa dengan Angular, lihat artikel saya, pelajari cara membuat aplikasi Angular pertama Anda dalam 20 menit

Hal pertama yang perlu kita lakukan adalah mengimpor

import axios from 'axios'

import axios from 'axios'

Kemudian, kita harus membuat layanan untuk menangani permintaan tersebut. Anda dapat dengan mudah menghasilkan layanan menggunakan Angular CLI

ng g service  FetchdataService

Kemudian, kita perlu mengimpor HttpClient di layanan

import axios from 'axios'

Dan di

import axios from 'axios'

import axios from 'axios'

//import
import { FetchdataService } from './fetchdata.service';

Terakhir, panggil layanan dan jalankan

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Anda dapat melihat contoh demo di Stackblitz

Membungkus

Kami baru saja membahas cara paling populer untuk membuat permintaan panggilan HTTP di JavaScript

Terima kasih atas waktu Anda. Jika Anda menyukainya, beri tepuk tangan hingga 50, klik ikuti, dan hubungi saya di Twitter

Omong-omong, saya baru-baru ini bekerja dengan sekelompok insinyur perangkat lunak yang kuat untuk salah satu aplikasi seluler saya. Organisasinya hebat, dan produk dikirim dengan sangat cepat, jauh lebih cepat daripada perusahaan lain dan pekerja lepas yang pernah bekerja sama dengan saya, dan saya rasa saya dapat dengan jujur ​​merekomendasikan mereka untuk proyek lain di luar sana. Kirimi saya email jika Anda ingin menghubungi — said@devsdata. com

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

kata Hayani

Pengembang Frontend, Penulis Teknis, Instruktur Bootcamp ➡️ Bergabunglah dengan kelas React/React Native saya di nucamp. co dan ubah karir Anda dalam 6 bulan, gunakan kode F3748T ➡️ Info kontak. dikatakan. dev@gmail. com

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara mengirim data menggunakan JavaScript?

Bagaimana cara mengirim permintaan ke server dalam JavaScript?

Bagaimana cara mengirim data JSON ke server menggunakan JavaScript?

Bagaimana cara mendapatkan data dari klien ke server dalam JavaScript?