How to send a big amount of data with ajax and jquery? - php

Question

I would like to send a big amount of data by using Ajax, php and Jquery and see the result each time has been added to the database in a div. I tried this approach but the requests slow down after ten thousand requests. I never did that before. please can you help me optmize the code ? i tried also to upload a csv file but when it's a big file it take too much time to be upload.
$(document).ready(function () {
$('#clear').click(function () {
$('#title').val('');
$('#date').val('');
$('#csvfile').val('');
$('#result').empty();
$(".loader").css('display','none');
});
$('#csv').on('submit',function (e) {
e.preventDefault();
$('.loader').css('display','inline-block');
var title = $('#title').val();
var date = $('#date').val();
if(title.length == 0 ){
$('#title').css("border","2px solid red");
}else{
$('#title').css("border","2px solid #bdc3c7");
}
if(date.length == 0 ){
$('#date').css("border","2px solid red");
}else{
$('#date').css("border","2px solid #bdc3c7");
}
if($('#csvfile').val() == 0){
$('#csvfile').css("border","2px solid red");
}else{
$('#csvfile').css("border","2px solid #bdc3c7");
var file = document.getElementById('csvfile').files[0];
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var rows = csv.split('\n');
let data = [];
const csvCleanUp = /("|\s"|\s)*/g;
var headers = rows[0].split(';');
for(var i=1;i<rows.length;i++){
var obj = {};
var currentline=rows[i].split(";");
for(var j=0;j<headers.length;j++){
const header = String(headers[j]).replace(csvCleanUp,'');
const currentValue = String(currentline[j]).replace(csvCleanUp,'')
obj[header] = currentValue;
}
data.push(obj);
}
console.log(data);
let nb = 1;
let d = 0;
var myInter = setInterval(function () {
if(d < data.length){
data[d]['title'] = title;
data[d]['date'] = date;
console.log(data[d]);
$.ajax({
url: "/admin/add/action/",
type: "POST",
data: data[d],
cache: false,
dataType: "json",
success: function (resp) {
//console.log(resp.msg);
if(typeof resp.msg != 'undefined'){
$('#result').append('<span class="' + resp.color + '"> n° ' + nb + '<br>' + resp.msg + '</span>');
}
$('#result').animate({ scrollTop: $('#result')[0].scrollHeight }, 50);
nb++;
}
});
$('#clear').click(function () {
$('#title').val('');
$('#date').val('');
$('#csvfile').val('');
$('#result').empty();
$(".loader").css('display','none');
clearInterval(myInter);
});
}
if(d > data.length){
$(".loader").css('display','none');
$('#result').append('<span class="success">Fin d\'execution du script</span>');
clearInterval(myInter);
}
d++;
},100)
}
});
});

Answer 1

this is the other aproach i have used:
$(document).ready(function () {
$('#clear').click(function () {
$('#title').val('');
$('#date').val('');
$('#csvfile').val('');
$('#result').empty();
$(".loader").css('display','none');
});
$('#csv').on('submit',function (e) {
e.preventDefault();
$('.loader').css('display','inline-block');
var title = $('#title').val();
var date = $('#date').val();
if(title.length == 0 ){
$('#title').css("border","2px solid red");
}else{
$('#title').css("border","2px solid #bdc3c7");
}
if(date.length == 0 ){
$('#date').css("border","2px solid red");
}else{
$('#date').css("border","2px solid #bdc3c7");
}
if($('#csvfile').val() == 0){
$('#csvfile').css("border","2px solid red");
}else{
$('#csvfile').css("border","2px solid #bdc3c7");
var file = document.getElementById('csvfile').files[0];
}
var data = new FormData(this);
$.ajax({
url: "/admin/add/v2/action/",
type: "POST",
data: data,
contentType: false,
cache: false,
processData:false,
success: function (resp) {
}
});
});