AJAX-Callback함수

임재헌·2023년 4월 3일
0

AJAX

목록 보기
5/10
<!DOCTYPE html>   
<html lang="ko"> 
<head>
    <meta charset="UTF-8">
<title>05 callback함수 </title> 
<style>
    
</style>
<!-- jquery import -->
<script src="jquery-3.6.4.min.js"></script>  
</head>
<body>
<button> *JSON데이터 받아오기* </button>
<div id="panel"></div>
<script>
//참고: https://www.w3schools.com/jquery/jquery_ref_ajax.asp
$("button").click(function(){
   //alert();
   // $.get()  $.post() $.serialsize()
   // $.getJSON(url,callback함수) json 데이터를 가져온다
    $.getJSON("sungjuks.json",responseProc); 
});

        function responseProc(result,status, xhr){    //CALLBACK함수
            //alert("responseProc 콜백함수");
            // alert(result);
            //alert(status);
            //alert(xhr);

            let str="<table border='1'>";
            $.each(result,function(idx, data){
                // alert(idx);
                // alert(data);
                str +="<tr>"
                str += "<td>" +data.name +"</td>";    
                str += "<td>" +data.id +"</td>";    
                str += "<td>" +data.kor +"</td>";    
                str += "<td>" +data.eng +"</td>";    
                str += "<td>" +data.mat +"</td>"; 
                str +="</tr>";

            });
                str +="</table>";
                $("#panel").empty();
                $("#panel").append(str);


        }
</script>
</body>
</html>
profile
임재헌
이전 포스트

AJAX-목록보여주기

다음 포스트

AJAX-배우목록 가져오기

0개의 댓글