[TIL-260115] jQuery: Form Element 다루기와 AJAX

이 글은 2026년 1월 15일에 작성된 글입니다.

Form Element

Form Element들과 Element들에 사용할 수 있는 메서드를 배웠다.

• input / textarea
  `val()` - 선택한 요소의 값을 가져오거나 새로운 값을 적용

<script>
    $(document).ready(function(){
        // 이메일에 키보드 입력하고 손 뗐을 때 이벤트
        $("#email").on("keyup", function(){
            // 콘솔에 입력한 이메일 보여줌
            var email = $("#email").val();
            console.log(email);
        })
    });
</script>

• select

<script>
    $(document).ready(function(){
        // 이메일에 키보드 입력하고 손 뗐을 때 이벤트
        $("#email").on("keyup", function(){
            // 콘솔에 입력한 이메일 보여줌
            var email = $("#email").val();
            console.log(email);
        })
        // 직업을 선택했을 때 이벤트
        $("#jobs").on("change", function(){
            // alert 창에 선택된 옵션의 text 띄워줌
            alert($("#jobs option:selected").text());
            // 콘솔에 jobs 옵션값 보여줌
            console.log("jobs 옵션값: " + $("#jobs").val());
        });
    });
</script>

 

• radio / checkbox
  `eq()` - 선택된 요소들의 집합에서 지정된 인덱스의 요소 하나만 선택
  `prop()` - 선택한 요소의 상태 속성 값을 가져옴

// 선택된 요소 중 1번 인덱스 요소를 찾아서 강제로 checked가 true이게 함.
<script>
  $("input[type=radio][name=age]").eq(1).prop("checked", true);
  // 전체선택/해제 체크박스를 클릭했을 때 이벤트
  $("#age").on("click", function(){
      var checked = $(this).prop("checked");
      if (checked){
          $("input[type=checkbox][name=age]").prop("checked", true);
      }
      else {
          $("input[type=checkbox][name=age]").prop("checked", false);
      }
  })
</script>

---

AJAX

• 비동기 방식의 웹 개발 기법
• 사용자 모르게 요청을 주고 받음
• 페이지를 새로고침 하지 않고 페이지의 특정 부분을 요청해서 페이지의 일부만 동적으로 업데이트함
• 서버와 통신하는 동안에도 사용자는 다른 작업을 할 수 있어 효율적

// ajax 주요 사용법 (예시)
$.ajax({
    url: 'https://api.example.com/data', // 요청을 보낼 URL
    type: 'GET', // HTTP 요청 방식 (GET, POST 등)
    dataType: 'json', // 응답받을 데이터 형식 (json, xml, html, text)
    success: function(response) {
        // 요청이 성공했을 때 실행할 코드 (response: 서버 응답 데이터)
        console.log(response);
    },
    error: function(error) {
        // 요청이 실패했을 때 실행할 코드
        console.error(error);
    }
});

JSON

• JavaScript Object Notation.
• 데이터를 전달할 때 사용하는 표준형식.
• 속성(key)과 값(value)이 하나의 쌍을 이루고 있는 텍스트 데이터.

sample.json의 데이터를 불러와서 table로 가공하여 출력하는 예제

<script>
	$(function() {
        $.ajax({
        url:"sample.json",
        dataType:"json",
        success:function(data) {
            if(data.length > 0) {
                var tb = $("<table />");
                for(var i in data) {
                    var id = data[i].id;
                    var first_name = data[i].first_name;
                    var last_name = data[i].last_name;
                    var email = data[i].email;
                    var gender = data[i].gender;

                    var row = $("<tr />").append(
                        $("<td />").text(id),
                        $("<td />").text(first_name),
                        $("<td />").text(last_name),
                        $("<td />").text(email),
                        $("<td />").text(gender)
                    );

                    tb.append(row);
                }
                $(".wrap").append(tb);
            }
        }
    });
});
</script>

---

❕느낀점

사실 이렇게 작성하는게 맞는지 모르겠다.. (처음이라 ㅎ..)

 

프론트엔드 부분은 1학년 때 배우고 그 이후로 거의 다룬 적이 없어서 처음에는 걱정이 됐다. 그래도 수업을 따라가다 보니 기억이 새록새록 떠오르는 느낌이었다. 백엔드에 비해 프론트엔드는 코드를 넣었을 때 결과를 직관적으로 바로 확인할 수 있어서 확실히 그 직관적인 점이 좋은 것 같다.

 

수업을 들으며 예제 실습도 무리없이 따라가고 있고, 아직까지는 큰 어려움은 없다. 스프링 들어가면 그때부터 진짜 시작이겠지
우선 지금까지 배운 내용을 나중에 프론트엔드 프로젝트 할 때 써먹을 수 있도록 잘 정리하고 복습해야겠다.

 

앞으로도 화이팅!!💪