AJAX

Asynchronous Javascript And XML
페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술

요즘은 XML보다 JSON을 사용함.

axios.get('url')
	.then((result) => {
  		console.log(result.data);
	})
	.catch((error) => {
  		console.error(error);
	});

FormData

HTML form 태그의 데이터를 동적으로 제어

const formData = new FormData();

formData.append('name', 'classbinu');
formData.append('job', 'teacher');
formData.has('name'); // true
formData.has('age'); // false
formData.get('name'); // classbinu
formData.getAll('item');
formData.delete('name');
formData.get('point'); // null
formData.set('name', 'Min');

const result = await axios.post(url, formData);

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 폼의 기본 제출 동작을 방지

  var formData = new FormData(this); // 현재 폼(this)을 기반으로 FormData 객체 생성

  // FormData 객체를 사용하여 AJAX 요청
  fetch('your-server-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
});

데이터 속성(data attribute)

HTML5에서 데이터를 저장하는 공식적인 방법

이 데이터는 눈에 보이지 않고 오직 JavaScript를 통해서만 접근 가능합니다.
data 속성은 가져올 때 data가 사라지고,-뒤의 글자가 대문자로 됨.

<ul>
  <li data-id='1' data-user-job="programmer">CB</li>
  ...
</ul>

<script>
  console.log(document.querySelector('li').dataset);
  // { id: '1', userJob: 'programmer' }
</script>

dataset은 해당 요소의 dataset이라는 필드명의 또 다른 객체라고 볼 수 있음.
즉, dataset.salary = 100; 이런 식으로 태그가 아니라 스크립트로 추가할 수도 있음.

지금까지 hidden으로 처리했는데, 이런 방법이 있었네.