Cara POST Request untuk Variabel Data dan Files pada Modal Bootstrap dengan Ajax dan Jquery

Hai, kawan-kawan kulikode setanah air, pada artikel ini saya akan memberikan tips dan trik dalam pengembangan aplikasi website khususnya untuk kalian yang masih suka bermain dengan Ajax dan Jquery untuk melakukan request baik GET dan POST tanpa melakukan refresh halaman browser.

Contoh kasus kita akan membuat upload form dengan input text, dan upload file.

Kode HTML:

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Kode Ajax:

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        dataType: 'json', 
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Kode PHP:

include_once ("connection.php");
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    $first = $_POST['first'];
    $middle = $_POST['middle'];
    $last = $_POST['last'];
    $temp_name = $_FILES['image']['name'];
    $pic_type = $_FILES['image']['type'];

    $pic_temp = $_FILES['image']['tmp_name'];
    $pic_path = "images/";
    move_uploaded_file($pic_temp,'images/'.$temp_name);
}

Dari kode di atas, ada beberapa yang saya berikan Bold, untuk dapat diantisipasi penggunaannya. Fungsi di atas akan berkerja dengan baik, dengan catatan kamu harus memasukkan 2 parameter penting yaitu:

contentType: false,
processData: false

Keterangan:

contentType merupakan pengaturan header untuk request yang kita kirimkan apakah diperlukan atau tidak. Secara lengkap kamu bisa melihat berbagai macam parameter contentType pada http://www.iana.org/assignments/media-types/media-types.xhtml

processData akan memproses data yang diteruskan berupa sebuah object dan mengirimkannya melalui header application/x-www-form-urlencoded.

• ProcessData = true : convert an object’s name value pairs into a URL encoding, or an array’s objects into name value pairs, or take a string as a literal.
• ProcessData = false: take a string as a literal, or call an object’s ToString() method.

Sedangkan untuk parameter pengaturan cache: false kamu perlu melakukan uji coba lebih lanjut, karena beberapa kondisi untuk submit form pada modal bootstrap sering tidak bekerja jika parameter ini diberlakukan. Kamu tinggal hapus saja parameter cache ini jika form submit tidak bekerja.

Dari dokumentasi Jquery dan di beberapa forum, penggunaan cache: false, sering terjadi error jika digunakan dengan GET dan HEAD Request, dimana pengaturan cache secara default bernilai false untuk dataType ‘script’ dan ‘jsonp’ (pada contoh di atas dataType: ‘json’). Hal ini dapat dipahami, bahwa fungsi FormData memang digunakan untuk melakukan request khusus pada method POST saja, tidak untuk GET.

Demikian penjelasan singkat mengenai cara membuat POST request pada Modal Boostrap dengan menggunakan Ajax dan Jquery. Semoga membantu permasalahan yang selama ini sering dihadapi.

Jangan lupa untuk like dan ikuti terus tulisan dari saya. Salam.

Referensi:

1. https://stackoverflow.com/questions/25390598/append-called-on-an-object-that-does-not-implement-interface-formdata
2. https://stackoverflow.com/questions/41949148/ajax-sending-input-file-and-additional-variable-to-php-file-through-ajax
3. https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax