Selamat datang di tutorial singkat dan contoh tentang cara memposting data formulir menggunakan Javascript Fetch. Jadi, Anda baru saja memulai dengan Javascript Fetch API, dan bertanya-tanya bagaimana cara mengirim data dengannya?
Untuk memposting data formulir menggunakan Ambil Javascript, cukup atur metode kirim ke "posting", dan atur data formulir di badan
- var data = new FormData();
- data.append("KEY", "VALUE");_
- fetch("URL", { method: "POST", body: data });_
Itu mencakup dasar-dasar cepat, tetapi baca terus untuk contoh terperinci
ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya .. Atau jika Anda hanya ingin langsung masuk
SLIDE CEPAT
Unduh & Catatan
UNDUH & CATATAN
Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan
CATATAN CEPAT
Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia.. Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman
DOWNLOAD KODE CONTOH
Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri
POST FORMULIR DATA DENGAN FETCH
Baiklah, sekarang mari kita masuk ke contoh posting form data dengan Javascript Fetch
BAGIAN 1) BENTUK HTML
1-pasca-data. html
<form onsubmit="return sendData()"> <input type="text" id="name" value="Jon Doe" required/> <input type="email" id="email" value="jon@doe.com" required/> <input type="submit" value="Go!"/> </form>Untuk contoh sederhana ini, kami memiliki formulir HTML tiruan dengan hanya 2 bidang – Nama dan email
BAGIAN 2) PENGAMBILAN JAVASCRIPT
1-pasca-data. html
function sendData () { // (A) GET FORM DATA var data = new FormData(); data.append("name", document.getElementById("name").value); data.append("email", document.getElementById("email").value); // (B) INIT FETCH POST fetch("2-dummy.php", { method: "POST", body: data }) // (C) RETURN SERVER RESPONSE AS TEXT .then((result) => { if (result.status != 200) { throw new Error("Bad Server Response"); } return result.text(); }) // (D) SERVER RESPONSE .then((response) => { console.log(response); }) // (E) HANDLE ERRORS - OPTIONAL .catch((error) => { console.log(error); }); // (F) PREVENT FORM SUBMIT return false; }_Ini cukup banyak "versi lengkap" dari cuplikan pengantar, harus cukup jelas
- Buat objek FormData(), kumpulkan semua data yang perlu dikirim ke server
- Seperti pada pendahuluan, setel pengambilan ke method: "POST" dan tambahkan data body: data
- Catat if (result.status != 200) { THROW ERROR }_ di sini. Untuk kalian yang baru, fetch akan menganggapnya sebagai "berhasil" selama server merespons - Bahkan ketika server merespons dengan kesalahan seperti 4o4 (tidak ditemukan), 403 (tidak sah), dan 500 (kesalahan server internal). Jadi, lebih aman melakukan pemeriksaan manual 200 (OK) di sini
- Respons server dalam sebuah string. Gunakan ini untuk menampilkan pesan sukses/gagal kepada pengguna
- Tangani kesalahan apa pun. Opsional, tetapi sangat dianjurkan
BAGIAN 3) SISI SERVER
2-boneka. php
<?php print_r($_POST);Terakhir, lakukan pemrosesan di sisi server sesuai kebutuhan – Skrip PHP dummy ini hanya menggemakan apa pun yang diposting
EKSTRA) CARA MALAS
- Berikan formulir ID – function sendData () { // (A) GET FORM DATA var data = new FormData(); data.append("name", document.getElementById("name").value); data.append("email", document.getElementById("email").value); // (B) INIT FETCH POST fetch("2-dummy.php", { method: "POST", body: data }) // (C) RETURN SERVER RESPONSE AS TEXT .then((result) => { if (result.status != 200) { throw new Error("Bad Server Response"); } return result.text(); }) // (D) SERVER RESPONSE .then((response) => { console.log(response); }) // (E) HANDLE ERRORS - OPTIONAL .catch((error) => { console.log(error); }); // (F) PREVENT FORM SUBMIT return false; }0
- Beri nama semua kolom formulir – function sendData () { // (A) GET FORM DATA var data = new FormData(); data.append("name", document.getElementById("name").value); data.append("email", document.getElementById("email").value); // (B) INIT FETCH POST fetch("2-dummy.php", { method: "POST", body: data }) // (C) RETURN SERVER RESPONSE AS TEXT .then((result) => { if (result.status != 200) { throw new Error("Bad Server Response"); } return result.text(); }) // (D) SERVER RESPONSE .then((response) => { console.log(response); }) // (E) HANDLE ERRORS - OPTIONAL .catch((error) => { console.log(error); }); // (F) PREVENT FORM SUBMIT return false; }1
- Masukkan formulir langsung ke formulir data – function sendData () { // (A) GET FORM DATA var data = new FormData(); data.append("name", document.getElementById("name").value); data.append("email", document.getElementById("email").value); // (B) INIT FETCH POST fetch("2-dummy.php", { method: "POST", body: data }) // (C) RETURN SERVER RESPONSE AS TEXT .then((result) => { if (result.status != 200) { throw new Error("Bad Server Response"); } return result.text(); }) // (D) SERVER RESPONSE .then((response) => { console.log(response); }) // (E) HANDLE ERRORS - OPTIONAL .catch((error) => { console.log(error); }); // (F) PREVENT FORM SUBMIT return false; }2
Yap, FormData()_ sebenarnya bisa mendapatkan semua kolom formulir secara otomatis. Saya benar-benar memutarbalikkan contoh di atas, untuk mengilustrasikan function sendData () { // (A) GET FORM DATA var data = new FormData(); data.append("name", document.getElementById("name").value); data.append("email", document.getElementById("email").value); // (B) INIT FETCH POST fetch("2-dummy.php", { method: "POST", body: data }) // (C) RETURN SERVER RESPONSE AS TEXT .then((result) => { if (result.status != 200) { throw new Error("Bad Server Response"); } return result.text(); }) // (D) SERVER RESPONSE .then((response) => { console.log(response); }) // (E) HANDLE ERRORS - OPTIONAL .catch((error) => { console.log(error); }); // (F) PREVENT FORM SUBMIT return false; }4 bagi mereka yang tidak bekerja dengan formulir HTML
BIT & LINK YANG BERMANFAAT
Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda
PERIKSA KOMPATIBILITAS
- Ambil API – CanIUse
- Formulir Data – CanIUse
Ambil sudah didukung dengan baik di semua browser modern. Perhatikan saja jika Anda harus mendukung Internet Exploders kuno
LINK & REFERENSI
- Ambil API – MDN
- Kode Respons HTTP – Wikipedia
LEMBAR CHEAT INFOGRAFIS
Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode