Rumah > hujung hadapan web > tutorial js > Bagaimanakah anda menghantar data borang dengan API Ambil dalam format yang berbeza?

Bagaimanakah anda menghantar data borang dengan API Ambil dalam format yang berbeza?

Susan Sarandon
Lepaskan: 2024-11-03 03:43:31
asal
746 orang telah melayarinya

How do you send form data with Fetch API in different formats?

Menyiarkan Data Borang dengan API Ambil

Apabila menggunakan API Ambil untuk menyerahkan data borang, terdapat dua format utama yang perlu dipertimbangkan:

Berbilang Bahagian/ Borang-Data

Apabila menggunakan FormData untuk membina badan permintaan, data akan dihantar secara automatik dalam format berbilang bahagian/data borang. Ini ialah gelagat lalai FormData dan tidak boleh diubah suai.

Application/x-www-form-urlencoded

Untuk menghantar data dalam format application/x-www-form-urlencoded, anda mempunyai beberapa pilihan:

1. Rentetan Berkod URL:

<code class="javascript">fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});</code>
Salin selepas log masuk

2. Objek URLSearchParams:

<code class="javascript">const data = new URLSearchParams();
data.append("email", "example@email.com");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>
Salin selepas log masuk

Perhatikan bahawa menyatakan pengepala Jenis Kandungan tidak diperlukan apabila menggunakan URLSearchParams, kerana ia menetapkan jenis kandungan yang betul secara automatik.

3. URLSearchParams daripada FormData:

<code class="javascript">const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>
Salin selepas log masuk

Pilihan ini membolehkan anda menghantar objek FormData terus untuk mencipta objek URLSearchParams. Walau bagaimanapun, ia mungkin mempunyai sokongan penyemak imbas yang terhad, jadi pastikan anda mengujinya dengan teliti sebelum menggunakannya.

Atas ialah kandungan terperinci Bagaimanakah anda menghantar data borang dengan API Ambil dalam format yang berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan