웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

ajax를 사용해 서버에 데이터 저장하는 방법

Last Modified : 2015-11-02 / Created : 2015-10-14
21,247
View Count
서버와 통신하기 위해 동기식 또는 비동기식 방법을 택할 수 있습니다. 아무래도 비동기식 방법은 서버에 부하를 덜어주기 때문에 유용한데요... 제 블로그의 경우 포스팅을 수정하거나 등록시 기존의 동기식 방법을 비동기식으로 변경하였습니다. 변경을 통해 얻을 수 있던 장점들은 아래와 같습니다.


! 비동기식 변경 후 장점

1. 서버에 전달 할 내용이 비동기식으로 변경하여 전체 소스를 읽는 리소스 낭비가 없다.
2. 1번 덕분에 자동 저장 기능을 만들 수 있다. 예를 들어 30초 마다 자동으로 서버에 데이터 전송
(기존 방식은 리소스 부담으로 어려움)


# 비동기식 방법을 위한 자바스크립트 코드 추가

<script>
$(function() {
var save_bt = $('#save_bt'); // 저장할 버튼을 변수에 선언
save_bt.click(function() {
var title = $('#title').html(); // 전송할 타이틀이 있는 요소
var text = $('#text').html(); // 전송할 내용이 있는 요소
$.ajax({
url: '/senddata.php', // 서버에 전달할 파일명
dataType: 'text',
type: 'post',
data: {
'title': idVal, // 전송할 파라미터 1
'text': setTitle // 전송할 파라미터 2
},
success: function() {
      alert('Success'); // 성공시 코드
}
});
})
})
</script>


위 소스코드를 간략히 설명하자면...

- dataType을 통해 전송되는 데이터 타입을 결정할 수 있습니다. 주로 사용되는 타입은 html, json, xml등이 있구요
- type 속성의 값으로 post를 사용하였습니다. get, post 중 원하는 방식을 선택하면 됩니다. 전송할 데이터가 많은 경우(제 경우 본문이 긴 점을 감안해) post를 사용하는게 좋습니다.
- data 속성은 실제 전송할 값으로 파라미터를 사용해 서버에 전송합니다. 전송할 값이 두개이지만 그 이상일 경우 파라미터를 추가해 전송할 수 있습니다.
- success 속성은 성공시 실행할 콜백함수입니다. 제 경우 알림창에 Success를 출력했습니다.

정상적으로 실행될 경우 Success를 출력 할 것입니다. 그럼 전송된 데이터를 받을 senddata.php의 내용을 알아봐야겠군요.

Previous

새로운 창 닫는 방법, window.close()

Previous

스와이프 갤러리 정보 및 플러그인, swipe gallery