Bagaimana untuk Menggabungkan Muat Naik Data dan Fail dalam Borang Ajax Tunggal?

Menggabungkan Muat Naik Data dan Fail dalam Borang Tunggal dengan Ajax

Dalam pembangunan web, keupayaan untuk menyerahkan kedua-dua data dan fail secara serentak daripada bentuk tunggal adalah penting. Ajax, pendekatan tak segerak, membolehkan pembangun mencapai perkara ini dengan lancar.

Untuk memahami cara menggabungkan data dan muat naik fail dalam bentuk Ajax, mari kita periksa kaedah tradisional untuk mengendalikan data dan fail secara berasingan.

Mengendalikan Data dengan Serialize()

kaedah .serialize() jQuery mengubah elemen bentuk menjadi rentetan pertanyaan yang boleh dihantar ke pelayan dengan permintaan Ajax. Contohnya:

$("form#data").submit(function() {

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        }
    });
});

Mengendalikan Fail dengan FormData

Untuk muat naik fail, FormData baharu($(this)[0]) mencipta objek FormData yang mewakili borang data dan fail. Berikut ialah contoh:

$("form#files").submit(function() {

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false
    });
});

Menggabungkan Data dan Fail

Untuk menggabungkan kedua-dua data dan muat naik fail, hanya gunakan objek FormData dan tambahkan semua elemen borang, termasuk input fail. Sebagai contoh, pertimbangkan HTML borang ini:

<form>

Dan kod jQuery dan Ajax yang sepadan:

$("form#datafiles").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

Kod ini akan mengumpulkan kedua-dua data dan fail daripada borang dan menghantarnya ke pelayan melalui permintaan Ajax POST.

Dengan memahami prinsip di sebalik pengendalian data dan fail, anda boleh dengan mudah menggabungkan kedua-dua kaedah untuk mencipta Ajax yang mantap borang yang menyokong penyerahan data yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Menggabungkan Muat Naik Data dan Fail dalam Borang Ajax Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!