[AJAX] 라디오버튼 값에 따른 출력값 변경

 
 
 
 
아래의 라디오 버튼을 클릭하면 값을 받아 컨트롤러로 전달하고 해당 값에 대한 정보들만 출력하고자 아래와 같이 ajax를 사용해보았다.
 
 

<div class="col-xl-3 col-lg-4 col-md-5">
          <div class="sidebar-categories">
            <div class="head">Browse Categories</div>
            <ul class="main-categories">
              <li class="common-filter">
                <form action="#">
                  <ul>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="seoul" name="location" value="서울"><label for="seoul">서울</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="incheon" name="location" value="서울"><label for="incheon">인천</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="gyeonggi" name="location" value="서울"><label for="gyeonggi">경기도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="gyeongnam" name="location" value="서울"><label for="gyeongnam">경상남도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="gyeongbuk" name="location" value="서울"><label for="gyeongbuk">경상북도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="junnam" name="location" value="서울"><label for="junnam">전라남도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="junbuk" name="location" value="서울"><label for="junbuk">전라북도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="chungnam" name="location" value="서울"><label for="chungnam">충청남도</label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="chungbuk" name="location" value="서울"><label for="chungbuk">충청북도</label></li>
                  	<li class="filter-list"><input class="pixel-radio" type="radio" id="jeju" name="location" value="서울"><label for="jeju">제주도</label></li>
                  </ul>
                </form>
              </li>
            </ul>
          </div>
        </div>

 
 
 
선택된 element의 value를 가지고 오도록 코드를 작성하여 
결과를 컨트롤러로 전달해주었다.
 

<script>
$(document).ready(function () {
    // 라디오 버튼 변경 감지
    $('input[type=radio][name=location]').change(function () {
        // 선택된 라디오 버튼의 값을 가져옴
        var selectedLocation = $(this).val();

        // 서버에서 해당 지역의 정보를 가져오는 비동기 요청
        $.ajax({
            type: 'GET',
            url: '/waguwagu/hospitalinfo/location',
            data: { 'location': selectedLocation },
            success: function (data) {
                // 서버에서 받아온 데이터를 사용하여 결과를 업데이트
                displayData(data, selectedLocation);
                console.log(data);
            },
            error: function (xhr, status, error) {
                console.error('에러 발생: ', error);
                console.log('xhr: ', xhr);
                console.log('status: ', status);
            }
        });
    });

    function displayData(data, selectedLocation) {
        // 데이터를 받아와서 화면에 출력하는 로직 추가
        var resultHtml = '<p>선택된 지역: ' + selectedLocation + '</p>';
        data.forEach(function (hospital) {
            resultHtml += '<p>' + hospital.yadmNm + ' - ' + hospital.addr + '</p>';
        });
        	$('#filteredResults').html(resultHtml);
    	}
	});
</script>

 
 
 
 
 
컨트롤러
 

@GetMapping("/location")
	@ResponseBody
	public List<HospitalInfo> getLocationHospitalList(@RequestParam("location") String sidoCdNm, Model model) {
		
		System.out.println("dddd"+sidoCdNm);
		return hospitalInfoRepository.findByLocation(sidoCdNm);
	}

 
 
 
컨트롤러까지 제대로 가는지 확인하기 위해 콘솔에 출력해보았다.
하지만 값이 제대로 전달되지 않는다는 것을 확인할 수 있었다.
 

 
 

 
뷰페이지에서 인천을 클릭했는데 계속 서울 값으로만 출력된다는 것을 확인했다.
 
이 오류를 어떻게 고칠지 생각해봐야한다.....
 
 
 
 

* ajax에 대해 공부해보기..!!!!!

바보다.....위의 코드를 보면 value 값을 모두 동일하게 서울로 입력했다....
그러니 당연히 서울로만 나오지....