[JS] - 비동기 처리해서 html 요소 추가하기

 

먼저 로직을 생각해보자

어떤 버튼을 누르면 조회한 데이터를 html 요소에 담아서 추가한다

 

좀 더 깊게 생각해보자

버튼을 누르면 ajax 통신으로 데이터 요청을 전송하고 들고오는데 성공하면 데이터를 그려주는 함수에 뿌린다

 

코드로 보자

 

1.

$('body').on('click', '#버튼1', function(e) {

    ajax요청(ajax데이터요청주소, 요청할함수명);

});

클릭했을때 ajax 통신을 요청한다

 

2.

function ajax요청(데이터요청주소, 보낼함수명) {

    $.ajax({

        type: "POST",

        url: 데이터요청주소,

        data: "",

        dataType: "json",

        success: function (result) {

            보낼함수명(result);

        }

        , complete: function () {

          loadingEnd();

        }

        , error: function (xhr, status, error) {

            alert("error : " + error);

        }

    });

}

성공시에 성공한 값들을 함수명에 보낸다

데이터 요청 주소는 컨트롤러/함수?get을 사용해서 주소를 던지고 컨트롤러 내부에서 조회한 데이터를

json_encode 함수로 인코드 해서 리턴한다

 

3.

function 보낼함수명(result) {

    var htmlTag = "";

    let base_url = result['base_url'];

    $.each(result['데이터배열'], function (key, value) {

        htmlTag += `<태그 생성>${value['키값']}</태그 생성>`;

        htmlTag += `<태그 생성>${value['키값']}</태그 생성>`;

    });

    $('#추가할위치').append(htmlTag);

    $('#버튼1').attr("data-url", result['다음리스트URL']);

    $('#버튼1').attr('disabled', false);

}

each문을 돌면서 htmlTag에 배열의 길이만큼 반복해서 담고 append를 통해서 html에 추가한다