Cara menggunakan formulir kiriman pengambilan javascript

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

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="[email protected]" 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

1. Buat objek FormData(), kumpulkan semua data yang perlu dikirim ke server
2. Seperti pada pendahuluan, setel pengambilan ke method: "POST" dan tambahkan data body: data
3. 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
4. Respons server dalam sebuah string. Gunakan ini untuk menampilkan pesan sukses/gagal kepada pengguna
5. 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;
}

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

Apa yang diambil dalam javascript?

Apa itu pengambilan data?