Cara menggunakan APPENDE di JavaScript

Question

Pada artikel ini kita akan membahas tentang mengirimkan formulir HTML. dengan atau tanpa bundel, dengan segmen tambahan dan lain-lain

Table of Contents Show

Apa yang ditambahkan dalam JavaScript?
Untuk apa fungsi append?
Apa yang dimaksud dengan menambahkan?
Apa fungsi DOM dalam JavaScript?

Objek dapat membantu untuk melakukan itu. seperti yang sudah Anda duga, FormData adalah objek yang mewakili data formulir HTML

Pembina adalah

let formData = new FormData([form]);

Jika elemen HTML form tersedia, maka bagian yang tersedia akan direkam secara otomatis

Hal khusus tentang FormData adalah metode koneksi. Seperti fetch yang dapat menerima objek FormData sebagai badan permintaan kemudian dikodekan dan dikirim dengan format

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

1

Dari sudut pandang server, ini terlihat seperti pengiriman formulir biasa

Mari kirimkan formulir sederhana terlebih dahulu

Seperti yang Anda lihat, hampir hanya satu baris

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_

Dalam contoh ini, kode server tidak ditampilkan karena berada di luar cakupan topik ini. Server menerima permintaan POST dan memberikan balasan "Pengguna disimpan"

Kita dapat memodifikasi bagian formulir di FormData dengan metode

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_3 – mengambil bagian formulir dengan

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

4 dan

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

5 diberikan,

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_6 – menambahkan bagian formulir seolah-olah

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

7, argumen ketiga

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

8 digunakan untuk menetapkan nama file (bukan nama bagian formulir) sebagai nama file di sistem file pengguna,

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_9 – hapus bagian formulir dengan

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

4 yang diberikan,

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

_1 – dapatkan nilai dari bidang formulir dengan

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

4 yang diberikan,

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

_3 – jika ada bagian pada formulir yang memiliki

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

4 maka itu akan mengembalikan nilai

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

5, jika tidak maka

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

6

Suatu formulir secara teknis memungkinkan memiliki beberapa bidang formulir dengan nama yang sama, jadi beberapa penggunaan

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

7 akan menambahkan lebih banyak bidang formulir dengan nama yang sama

Ada juga metode

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

_8 dengan sintaks yang sama dengan

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

7. Perbedaannya adalah

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_0 menghapus semua bagian formulir dengan nama yang diberikan lalu menambahkan bagian formulir baru. Jadi, itu memastikan bahwa hanya ada satu bidang formulir dengan nama itu, sisanya seperti

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

7

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

2,

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

3

Kita juga dapat mengulang bagian formData menggunakan

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

4

let formData = new FormData();
formData.append('kunci1', 'nilai1');
formData.append('kunci2', 'nilai2');

// Daftar pasangan kunci/nilai
for (let [name, value] of formData) {
    alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2
}

Formulir selalu mengirimkan data sebagai

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_1, pengkodean ini memungkinkan pengiriman file. Jadi, bagian

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

_7 juga dapat dikirim, mirip dengan pengiriman formulir biasa

Berikut adalah contoh formulirnya

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

Seperti yang telah kita lihat dalam pembahasan Ambil, di mana sangat mudah untuk mengirim data biner yang dihasilkan secara dinamis, misalnya gambar sebagai

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

7. Kita bisa langsung menjadikannya sebagai parameter ________20______8 fetch

Meskipun dalam praktiknya, seringkali lebih mudah mengirim gambar tidak secara terpisah tetapi sebagai bagian dari formulir dengan bidang tambahan seperti "nama" dan metadata lainnya

Selain itu, server biasanya lebih cocok untuk menerima formulir yang disandikan dengan

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

1 daripada data biner mentah

Contoh di bawah mengirimkan gambar dari

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

1 bersama dengan bidang formulir lainnya menggunakan FormData

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

Perhatikan bagaimana gambar

<form id="formElem">
    <input type="text" name="firstName" value="John" />
    Picture: <input type="file" name="picture" accept="image/*" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

7 ditambahkan

formData.append('image', imageBlob, 'image.png');

Sepertinya ada

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

_4 di formulir kemudian pengunjung mengirim file dengan nama

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

5 (argumen ke-3) dengan data

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

6 (argumen ke-2) dari sistem file

Server membaca data formulir dan file seolah-olah itu adalah pengiriman formulir normal

Objek digunakan untuk mengambil formulir HTML dan mengirimkannya menggunakan fetch atau metode jaringan lainnya

Kita dapat membuat

<body style="margin:0">
    <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

    <input type="button" value="Submit" onclick="submit()" />

    <script>
            canvasElem.onmousemove = function(e) {
              let ctx = canvasElem.getContext('2d');
              ctx.lineTo(e.clientX, e.clientY);
              ctx.stroke();
            };

            async function submit() {
              let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

              let formData = new FormData();
              formData.append("firstName", "John");
              formData.append("image", imageBlob, "image.png");

              let response = await fetch('/article/formdata/post/image-form', {
                method: 'POST',
                body: formData
              });
              let result = await response.json();
              alert(result.message);
            }
    </script>
</body>

8 dari formulir HTML atau membuat objek FormData tanpa formulir HTML dan kemudian menambahkan bagian formulir dengan metode berikut

Apa yang ditambahkan dalam JavaScript?

Fungsi tambahkan adalah menambahkan item di akhir daftar dengan pemrograman tingkat tinggi.

Untuk apa fungsi append?

Salah satu fitur dalam array python yang cukup sering digunakan adalah fungsi append. Fungsi append ini berguna untuk menambahkan nilai array pada urutan terakhir . Fungsi ini sedikit berbeda dengan fungsi insert, dimana fungsi insert dapat menambahkan nilai array pada posisi tertentu.

Apa yang dimaksud dengan menambahkan?

tambahkan [ditambahkan. ditambahkan] {kata kerja transitif/dengan objek} tambahkan {ktrj dengan obj. } menambahkan {untuk bekerja dengan obj. } lampirkan {kt krj dengan obj. }

Apa fungsi DOM dalam JavaScript?

“DOM atau Document Object Model adalah objek JavaScript khusus yang hanya ada di lingkungan Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya . ”

kode javascript