SELECT 박스에서 선택한 값 데이터 요청 전송

먼저 셀렉트박스에서 선택한 값을 서버로 보내서 전화번호를 가져오는 코드를 작성했다.

 

셀렉트박스가 변경될 때 이벤트가 발생되고

 

선택한 센터아이디와 체크박스에 체크된 지역코드를 서버로 보내서

 

실행된 값을 json 타입으로 받아와서 값이 0이 아닐경우 가져온 값을 phone에 넣어서

 

화면에 보여주는 방식이다.

 

소스코드

$(document).ready(function () {
    // 셀렉트박스 값 변경 이벤트
    $("#sel_centerId").change(function () {
        var selectedCenterId = $(this).val(); // 선택된 센터 ID 가져오기

        if (selectedCenterId === "") {
            // 선택된 값이 없을 경우, 전화번호 필드 초기화
            $("#phone").val("");
        } else {
            // AJAX 호출로 전화번호 정보 가져오기
            $.ajax({
                url: "/com/ajax/geSidoCenterInfo.do", // 서버 요청 URL
                type: "GET",
                data: {"sido":$("input[name=region]:checked").val(), // 선택된 지역을 서버에 전달
                    "center_id":$("#sel_centerId").val()}, // 선택된 센터 ID를 서버에 전달
                dataType: "json", // 서버에서 반환받을 데이터 타입 (JSON)
                success: function (data) {
                 console.log(data[0].PHONE); //응답 데이터를 콘솔에 출력
                    if (data[0] && data[0].PHONE !== 0) {
                     var phoneValue = data[0].PHONE;
                        // 서버에서 반환된 전화번호를 입력 필드에 설정
                        $("#phone").val(phoneValue);
                    } else {
                        // 데이터가 없을 경우 초기화
                        $("#phone").val("전화번호 없음");
                    }
                },
                error: function () {
                    alert("전화번호 정보를 가져오는 중 오류가 발생했습니다.");
                },
            });
        }
    });
});

화면에 뿌려주는 인풋박스

위처럼 인풋박스에서 보여준다.

 

서버에서 데이터가 잘 넘어오는지 체크하기 위해서 

 

// centerInfo 리스트 내의 각 항목에서 phone 값을 확인 for (HashMap<Object, Object> item : centerInfo) { System.out.println("Phone: " + item.get("phone")); }

 

for문을 사용해서 컨트롤러에서 전화번호를 콘솔에 뿌린다.

지역을선택할 때 해당지역의 모든구의 전화번호가 나온다.

그리고 구를 선택하면 해당구의 전화번호를 콘솔에 띄운다.

 

이렇게하면 정상적으로 화면에서 연락처가 나온다.