Terkadang bagi para programmer pusing bagaimana cara mengirim data form yang terbilang cukup besar. entah itu untuk mengimport data atau memecah data menjadi ukuran yang lebih kecil. jika kita melakukan dibagian backend kejadian seperti ini sering terjadi apalagi dengan speksifikasi server yang tidak mumpuni. "Error: error_max_input_var" adalah error yang terjadi pada server akibat request terlalu banyak yang membuat programmer menjadi super saiyan. Error seperti itu, bukan berarti tidak ada solusinya. kita bisa membuat antrian data atau Queque. So Let's Begin.
Pertama sediakan dulu Library yang kita butuhkan.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
Kemudian, kita membuat form yang akan kita gunakan untuk mengirim data. Kita juga membuat input field didalam form seperti kode dibawah ini:
@php $container=[] @endphp
<button type="button" id="import_data" class="btn btn-warning"
style="color: white; font-weight: bold;"><i
class="icon-save2"></i> Import Data
</button>
<table>
<form action="{{ url('upload-drop-zone') }}" class="dropzone" id="my-dropzone">
@csrf
@foreach (range(1, 500) as $item)
<tr>
<td><input name="field1" value="{{ 'value a: - ' . $item }}"></td>
<td><input name="field2" value="{{ 'value b: - ' . $item }}"></td>
<td><input name="field3" value="{{ 'value c: - ' . $item }}"></td>
<td><input name="field4" value="{{ 'value d: - ' . $item }}"></td>
<td><input name="field4" value="{{ 'value e: - ' . $item }}"></td>
</tr>
@php($container[] = $collection)
@endforeach
</form>
</table>
@foreach(array_chunk($container, 2500) as $item_collction)
<input type="hidden" name="property" class="property"
value="{{json_encode($item_collction)}}">
@endforeach
Kemudian, kita mengetikan beberapa baris code dimana code tersebut akan mengatur request yang akan dikirimkan. seperti kode dibawah ini.
a. Kode dibawah ini. pada saat browser selesai merender halaman. Nilai dari tag elemen yang mempunyai class 'property' akan ditampuh kedalam array 'ajaxQueue'.
var ajaxQueue = [];
var currentRequestIndex = -1;
var max_data = 0;
var cannot_refresh = true;
$(document).ready(function() {
$('.property').each(function(i, v) {
var data = $(this).val();
var request = {
url: 'put your link in here for post value',
data: {
'property': data,
'_token': '{{ csrf_token() }}'
},
success: function(response) {
console.log('Request ' + i + ' success:', response);
},
error: function(xhr, status, error) {
console.error('Request ' + i + ' error:', error);
}
};
ajaxQueue.push(request);
})
});
b. Setelah itu, kita membuat event click pada tombol dengan id 'import_data' yang akan menjalankan fungsi processNextRequest, seperti kode dibawah ini.
$('#import_data').click(function () {
// Tambahkan kode ini jika ingin menggunakan progress bar didalam modal seperti ini:
// $('#progress_bar').modal({backdrop: 'static', keyboard: false});
processNextRequest();
});
c. Sekarang buat function 'processNextRequest()' yang berfungsi untuk membagi berapa banyak data yang akan dikirim, seperti kode dibawah ini:
function processNextRequest() {
currentRequestIndex++;
var distence = 500/ajaxQueue.length;
if(max_data>499){
console.log(max_data);
$('#progress_bar').modal('hide');
setTimeout(function(){
window.location.href="refresh page affter request"
}, 1000);
}
if (currentRequestIndex < ajaxQueue.length) {
var request = ajaxQueue[currentRequestIndex];
ajaxQueueRequest(request.url, request.data, request.success, request.error);
// Kondisi dimana yang akan mengatur halaman jika pengiriman data selesai dipost maka halaman akan refresh
max_data +=distence;
cannot_refresh = true;
}
}
d. Terakhir membuat fungsi 'processNextRequest' yang berfungsi untuk mengirim data yang telah dibagi. seperti code dibawah ini:
function ajaxQueueRequest(url, data, successCallback, errorCallback) {
$.ajax({
url: url,
method: 'POST',
data: data,
success: function (response) {
if (typeof successCallback === 'function') {
successCallback(response);
}
},
error: function (xhr, status, error) {
if (typeof errorCallback === 'function') {
errorCallback(xhr, status, error);
}
},
complete: function () {
// Once the request is complete, dequeue and process the next request (if any)
$('#loading').width(max_data);
processNextRequest();
}
});
}
Ok selesai, Silahkan mencoba. Good Luck.
