본문 바로가기

자바스크립트(jquery)

jquery 다량의 배열 post

반응형

post할 데이터가 배열에 많이 할당되는 경우가 생겼다.

html에서 name이 배열 형태로 되어있는 데이터를 ajax를 이용해서 서버로 post하는데 많은 데이터를 넘겨야되는 일이 있었다.

몇 십 건까지는 문제없었지만 200건이 넘어가는 순간부터는 배열이 넘어가지 않았다.

아마 서버에서 post받는 양이 제한되는듯 하다. 서버를 건드릴수가 없어서 jquery를 수정해봤다.

 

기존ajax

$.ajax({
	url: '/url',
	type: 'post',
	dataType: 'json',
	data: $('#form').serialize(),
	success: function (response) {
		alert(response.msg);
		if(response.status=='ok'){
			self.location.reload();
		}
	},
	error: function (request, status, error) {
		console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
	}
});

serialize를 활용하여 post했더니 200건 이상부터는 배열이 넘어가지 않았다.

 

그래서 직렬화 후 post하도록 수정했다.

수정ajax

let dataArray = [];

//json 직렬화 후에도 index 끼리의 순서를 맞춰주기 위해 아래처럼 가져옴
$('input[name="f_name[]"]').each(function(index) {
	let obj = {
		f_name: $(this).val(),
		f_phone: $('input[name="f_phone[]"]').eq(index).val(),
		f_post_num: $('input[name="f_post_num[]"]').eq(index).val(),
		f_nickname: $('input[name="f_nickname[]"]').eq(index).val()
	};
	dataArray.push(obj);
});

// 동기화 데이터 배열을 JSON 형식으로 직렬화
let syncData = JSON.stringify(dataArray);

//단순 serialize로는 200개 이상의 배열을 post하지못함
//json 형식으로 직력화 후 post
$.ajax({
	url: '/url',
	type: 'post',
	dataType: 'json',
	data: {
		"csrf":"csrf",
		arrayData: syncData,
		type: $("#type").val()
	},
	success: function (response) {
		alert(response.msg);
		if(response.status=='ok'){
			self.location.reload();
		}
	},
	error: function (request, status, error) {
		console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
	}
});

 

php서버에서 받는 코드

$arr_data = $this->input->post("arrayData");
$data_arr = json_decode($arr_data, true); // JSON 데이터를 배열로 변환

$f_name_arr = array();
$f_phone_arr = array();
$f_post_num_arr = array();
$f_nickname_arr = array();	
//json형태로 가져온 배열들 arr에 할당
foreach ($data_arr as $entry) {
	array_push($f_name_arr ,$entry['f_name']);
	array_push($f_phone_arr ,$entry['f_phone_arr']);
	array_push($f_post_num_arr ,$entry['f_post_num_arr']);
	array_push($f_nickname_arr ,$entry['f_nickname_arr']);
}

 

arrayData로 직렬화된 데이터를 받아 decode를 해서 배열로 변환 후

반복문을 돌려 각각에 원하는 배열에 push 해주었다.

 

더 나은 방법이 있는지는 찾아봐야겠다.