과거 데이터 처리는 일반적으로 form 을 이용하여 처리하였으나 요즘은 ajax 처리가 많아지면서

사용자로부터 입력이 없는 데이터처리는 form 이 아닌 스크립트로 많이 처리한다. 

하지만 스크립트에 PHP로 데이터처리를 하다보면 소스코드가 지저분하게 보여질 수 있고 

공통파일 처리도 어려울 수 있기에 각 정보를 특정 태그에 data 속성으로 담아주고 처리하는게 좋다. 

아래는 data 속성을 이용한 스크립트 활용한 예제 소스이다. 

<?php
	// 데이터 아이템 
	$data = array(
		'이름'=>'홍길동',
		'학번'=>'20074869',
		'학과'=>'컴퓨터공학',
		'학점'=>'4.5'
	);
	$key = array_keys($data);
	
	// 아이템 가공
	$data_items = array('sort'=>array(),'item'=>array());
	foreach($data as $k=>$v){ 
		$data_items['sort'][] = "data-".$k.'="'.array_search($k,$key).'"';  // 순서정렬을 위한 처리
		$data_items['item'][] = "data-".$k.'="'.$v.'"'; // 실제 데이터 처리
	}

	// 태그 노출
	foreach($data_items as $k=>$v){  echo '<div id="'.$k.'" style="display:none;" '.implode(" ",$v).'></div>'; }
?>


<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><?php // http://craftpip.github.io/jquery-confirm/ ?> 
<div id="input"></div>
<script>
	$(document).ready(function(e){
		var item = $('#item').data();
		var sort = $('#sort').data();
		var input = new Array();
		$.each(item,function(i,v){
			if( typeof v != 'undefined'){ 
				input[sort[i]] = i+': <input type="text" name="'+i+'" value="'+v+'"/>'; 
			}			
		});

		// input div 에 입력값을 출력
		$('#input').append(input.join("<br>"));

		// ajax 처리가 필요할경우 
		$.ajax({url:'/', data:item, dataType:'json',type:'post'})
		.done(function(e){ /* 결과 */})
	});
</script>