HealthDuo-home 화면

 

지역 선택화면

http://daplus.net/css-%EB%B6%80%ED%8A%B8-%EC%8A%A4%ED%8A%B8%EB%9E%A9%EC%9D%B4%EC%9E%88%EB%8A%94-%EA%B3%A0%EC%A0%95-%EB%84%88%EB%B9%84-%EB%B2%84%ED%8A%BC/

 

버튼 크기를 고정하기 위에 링크에서 나온 해결방법을 적용해봤으나 변하지 않았다.... 나중에 다시 고쳐봐야 겠다.

 

경기도를 클릭했을때 나오는 화면

성남시를 클릭했을때 나오는 화면

 

분당구를 클릭했을때 나오는 화면

 

 

동을 클릭하면 해당되는 동 게시판이 나오게된다.

 

<script  type="text/javascript">
    let addressInfo = document.getElementById("addressInfo");

    window.onload = async function () {
        str = "";
        asd = "";
        let URL = "http://localhost:8080/findRegion"
        let options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        }
        let response = await fetch(URL, options)
        let regionInfo = await response.json();
        for (let i = 0; i < regionInfo.length; i++) {
            if (i % 2 == 0 && i > 0) {
                str += '<br>'
            }
            str += '<button   class="btn-secondary btn-lg custom" value="button" onclick="nextRegion(\''+regionInfo[i]+'\')">' + regionInfo[i] + '</button>';
        }
        addressInfo.innerHTML = str;
    }

    async function nextRegion(region) {
        addressInfo.innerHTML = " ";
        str = "";

        let URL = "http://localhost:8080/findCity"
        let options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                region: region
            })
        }
        let response = await fetch(URL, options)
        let nextinfo = await response.json();

        if (region == "서울특별시") {
            for (let i = 0; i < nextinfo.length; i++) {
                if (i % 2 == 0 && i > 0) {
                    str += '<br>'
                }
                str += '<button class="btn-secondary btn-lg custom" type="button" onclick="nextStreet(\''+ nextinfo[i] +'\')">' + nextinfo[i] + '</button>';

            }
            addressInfo.innerHTML = str;
        } else {
            for (let i = 0; i < nextinfo.length; i++) {
                if (i % 2 == 0 && i > 0) {
                    str += '<br>'
                }
                str += '<button class="btn-secondary btn-lg custom" type="button" onclick="nextFullCity(\'' + nextinfo[i] +'\' )">' + nextinfo[i] + '</button>';
            }
            addressInfo.innerHTML = str;
        }
    }

    async function nextFullCity(city) {

        addressInfo.innerHTML = " ";
        str = "";

        let URL = "http://localhost:8080/findfullCity"
        let options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                city: city
            })
        }
        let response = await fetch(URL, options)
        let nextinfo = await response.json();
        for (let i = 0; i < nextinfo.length; i++) {
            if (i % 2 == 0 && i > 0) {
                str += '<br>'
            }
            str += '<button class="btn-secondary btn-lg custom" type="button"  onclick="nextStreet(\''+ nextinfo[i] +'\')">' + nextinfo[i] + '</button>';
        }
        addressInfo.innerHTML = str;


    }

    async function nextStreet(fullCity) {

        addressInfo.innerHTML = " ";
        str = "";

        let URL = "http://localhost:8080/findStreet"
        let options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                fullCity: fullCity
            })
        }
        let response = await fetch(URL, options)
        let nextinfo = await response.json();
        for (let i = 0; i < nextinfo.length; i++) {
            if (i % 2 == 0 && i > 0) {
                str += '<br>'
            }
            str += '<button class="btn-secondary btn-lg custom" type="button" onclick="location.href=\'bbsLists?address='+ nextinfo[i] + '\'">' + nextinfo[i] + '</button>';
        }
        addressInfo.innerHTML = str;
    }
</script>

 

비동기 통신을 통해 지역에 대한 정보로 xx구에대한 정보를 찾고 구에대한 정보로 xx동의 정보를 얻는다. xx동을 클릭하게

 

되면 xx동에 해당되는 게시판이 보여진다.