[jquery] ajax로 서버에 데이터 보내기

jQuery로 시작하는 건 추천하지 않는다는 얘기가 있어서 저는 jQuery를 뛰어넘고 html, css, javascript를 공부했었습니다. 뛰어넘었다는 말은 왠지 손바닥 위에 놓고 볼수 있다는 말인 것같아서 다르게 표현하자면 .. 거의 거들떠도 보지 않은 것 같습니다. 마치 웹 개발에는 굳이 필요하지 않다듯이..

버튼을 클릭하면 변하게 하거나.. 그런 기능도 javascript로도.. 어떻게든 가능하겠으나 코드는 복잡해질 것입니다. 그걸 jQuery로 간편하게 가독성 좋게 구현할 수 있는 것이고. (근데 버튼 클릭하여 색 변경은 js로 해도.. 복잡하지는 않..)

또한 부분적으로도 적용할 수 있다는 점과 새로고침없이 반영된다는 점들이 너무나도 매력적입니다.

ajax의 기본 문법이라 하는 코드와 $.post만 보여주고 물러나고자 합니다.

---

# HTML <script>

<script> $.ajax({ url : '/list', method : 'POST', dataType: "text", }).done(function(result){ // 요청이 성공하면 콜백함수 실행 console.log("삭제 성공!"); //AJAX 성공시 실행 할 코드적기 }).fail((xhr,code,err)=>{ console.log(xhr, code, err); //AJAX 실패시 실행할 코드적기 }); </script>

위 코드에서 method, url, datatype가 $.ajax의 기본 문법이라 할 수 있겠습니다. method는 POST로 할지 GET으로 할지 정하는 공간인데 PUT,DELETE도 가능합니다.

post나 get나 데이터 요청을 하는데 post는 서버와 데이터를 주고 받습니다.

url에는 서버 경로를 넣으면됩니다. http://~local, 파일 주소도 가능하고 따로 express이용하고 있다면 데이터를 주고 받을 app.post('/list', function(req, res){ }에서 '/list'를 $.ajax의 url에 넣으면 됩니다.

.done와 .fail을 썼는데 보통은 success: 로 진행하는 듯합니다.

$.ajax({ url: "/list", method: "POST", dataType: "text", success: function (data) { console.log(data) } })

여기에 ~ 클릭 시 실행하게 하도록 .$("btn").click(function() { })으로 감싸면 됩니다.

위와 같이 작성해서 데이터를 보낼 수는 있지만, 이렇게도 가능합니다.

// 데이터 보내기 $('.btn').click(function(e){ var resultId = e.target.dataset.id; $.post('/list', {listId :resultId}).then(()=>{ console.log("성공"); }) });

$.post 해서 보낼 수도 있습니다.

---

* 참고하면 좋은 사이트
(** 조코딩님의 [Javascript 기초와 활용 #1] 정말 쉬운 jQuery로 스타크래프트 만들기?! 영상에서 다룬 사이트들이다. **)

3schools

- jquery 말고도 html, css, javascript.. 등등 다룹니다. 무엇이 있고 어떻게 활용할 수 있는지 예제들이 모아져 있습니다.

https://www.w3schools.com/jquery/default.asp

jQuery Tutorial

jQuery 공식 사이트

- 문법이나 무슨 함수가 있는지 알 수 있습다.

https://api.jquery.com/

jQuery API Documentation

codepen

- 코드펜은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티입니다. 온라인 코드 편집기이자 오픈 소스 학습 환경 기능을 하며 여기서 개발자들은 펜으로 불리는 코드 조각을 만든 다음 이를 테스트할 수 있습니다. (* 위키백과)

- 다양한 기능들을 보고 쓸 수도 있습니다.(* 저작권 유의)

https://codepen.io/

CodePen