1211 Javascript, AJax, RestAPI select+조건

계층 구조

continent

country

city

Mapper

@Mapper
public interface DBMapper {
	List<Map<String,Object>> continentList();
	
	List<Map<String,Object>> countrytList(int continentId);
	
	List<Map<String,Object>> cityList(int countryId);
}

<select id="continentList" resultType="map">
    SELECT 
        continent_id continentId
        , continent_name continentName
    FROM continent
</select>

<select id="countrytList" parameterType="Integer" resultType="map">
    SELECT 
        country_id countryId
        , country_name countryName
    FROM country
    WHERE continent_id = #{continentId}
</select>

<select id="cityList" parameterType="Integer" resultType="map">
    SELECT 
        city_id cityId
        , city_name cityName
    FROM city
    WHERE country_id = #{countryId}
</select>

 

HomeController

@Controller
public class HomeController {
	@GetMapping("/home")
	public String home() {
		return "home";
	}
}

 

HomeRest

@RestController
public class HomeRest {
	@Autowired DBMapper dbMapper;
	
	@GetMapping("/continentList")
	public List<Map<String,Object>> continentList(){
		return dbMapper.continentList();
	}
	
	@GetMapping("/countryList/{continentId}")
	public List<Map<String,Object>> countryList(@PathVariable Integer continentId){
		return dbMapper.countrytList(continentId);
	}
	
	@GetMapping("/cityList/{countryId}")
	public List<Map<String,Object>> cityList(@PathVariable Integer countryId){
		return dbMapper.cityList(countryId);
	}
}

 

home.jsp

<h1>HOME</h1>
<select id="continent">
    <option value="">:::대륙 선택:::</option>
</select>
<select id="country">
    <option value="">:::나라 선택:::</option>
</select>
<select id="city">
    <option value="">:::도시 선택:::</option>
</select>

<script>
    $.ajax({
        url:'/continentList'
        , method:'GET' // 디폴트
    }).done(function(result){
        $(result).each(function(index,item){
            $('#continent').append(
                    '<option value="' + item.continentId + '">' + item.continentName + '</option>')
        });
    }).fail(function(){
        alert('continentList 비동기호출(ajax) 실패');
    });

    // continent값이 변경되면
    $('#continent').change(function(){
        $.ajax({
            url:'/countryList/' + $('#continent').val()
            , method:'GET'
        })
        .done(function(result){
            // country 리셋
            $('#country').empty();
            $('#country').append('<option value="">:::나라 선택:::</option>');
            $(result).each(function(index,item){
                $('#country').append(
                        '<option value="' + item.countryId + '">' + item.countryName + '</option>')
            });
        })
        .fail(function(){
            alert('countryList 비동기호출 실패')
        })
    })

    // country값이 변경되면
    $('#country').change(function(){
        $.ajax({
            url:'/cityList/' + $('#country').val()
            , method:'GET'
        })
        .done(function(result){
            // country 리셋
            $('#city').empty();
            $('#city').append('<option value="">:::도시 선택:::</option>');
            $(result).each(function(index,item){
                $('#city').append(
                        '<option value="' + item.cityId + '">' + item.cityName + '</option>')
            });
        })
        .fail(function(){
            alert('cityList 비동기호출 실패');
        });
    })
</script>

 

대륙 선택 -> 해당 대륙의 나라

나라 선택 -> 해당 나라의 도시