[15] JavaScript & JQuery - 국세청 API ajax()활용_2

[ 환경 ]
ㄴ JQuery 1.11.1

 

https://kuk1938.tistory.com/82

[14] JavaScript & JQuery - 국세청 API ajax()활용

ㄴ 해당 포스팅 이어서

 

★ 관련 정보를 볼 수 없어서 after()를 사용하여 정보 출력

ㄴ .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.

---

1. JQuery코드

var tax_type = api[i]["tax_type"]; // 과세유형
var b_no = api[i]["b_no"]; // 사업자등록번호
var b_stt = api[i]["b_stt"]; // 납세자상태

$(".b_no").attr("readonly", "readonly");
$(".b_no").css("background-color","#ededed");

var html = `
<div class="tax_res">
    <div>
    <span>
        사업자등록번호 : ${b_no}
    </span>
    <span>
        납세자상태 : ${b_stt}
    </span>
    <span>
        과세유형 : ${tax_type}
    </span>
    </div>
</div>
`;
$(".b_no_Wrap").after(html);

ㄴ추가된 코드

 

<script>
    $(function(){
        // 사업자등록번호 API
        $(".bnoBtn").click(function(){
            var b_no = $(".b_no").val();
            var data = {  "b_no": [b_no]  };
                $.ajax({
                url: "https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=서비스키",  // serviceKey 값을 xxxxxx에 입력
                type: "POST",
                dataType: "JSON",
                data :  JSON.stringify(data),
                contentType: "application/json",
                accept: "application/json",
                success: function(result) {
                    console.log(result);
                    var status_code = result["status_code"];
                    var api = result["data"];

                    if(status_code != "OK"){
                        alert("인증을 실패하였습니다. 사업자 등록번호를 다시 확인해주시기 바랍니다.");
                        return false;
                    }

                    for(var i = 0; i < api.length; i++) {
                        var tax_type = api[i]["tax_type"]; // 과세유형
                        var b_no = api[i]["b_no"]; // 사업자등록번호
                        var b_stt = api[i]["b_stt"]; // 납세자상태

                        if(tax_type == "국세청에 등록되지 않은 사업자등록번호입니다."){
                            alert("등록되지 않은 사업자등록번호입니다. 다시 확인해주시기 바랍니다.");
                            return false;

                        }else{
                            alert("사업자등록번호의 인증이 완료되었습니다.")
                            $(".b_no").attr("readonly", "readonly");
                            $(".b_no").css("background-color","#ededed");

                            var html = `
                                <div class="tax_res">
                                    <div>
                                        <span>
                                            사업자등록번호 : ${b_no}
                                        </span>
                                        <span>
                                            납세자상태 : ${b_stt}
                                        </span>
                                        <span>
                                            과세유형 : ${tax_type}
                                        </span>
                                    </div>
                                </div>
                            `;
                            $(".b_no_Wrap").after(html);
                        }
                    }
                },
                error: function(result) {
                    console.log(result.responseText); //responseText의 에러메세지 확인
                }
            });
        })
    })
</script>

ㄴ 최종 코드

ㄴ after를 사용하여 사업자번호 입력 input 바로 밑으로 관련정보 영역을 노출한다.

ㄴ html코드에 관련정보의 값을 담고 사업자등록번호 조회가 정상적으로 완료될때, 나타나도록 한다.

2. 기능확인

 

ㄴ 기능 구현 완료

ㄴ 120-81-47521 kakao 사업자번호로 조회 ( console에서 조회한 상세정보 확인 )