AJAX-데이터 가져오기

임재헌·2023년 4월 3일
0

AJAX

목록 보기
3/10
sungjuk.json
[
    {"name":"JOHN","id":"itwill","kor":70,"eng":80,"mat":90}
]
<!DOCTYPE html>   
<html lang="ko"> 
<head>
    <meta charset="UTF-8">
<title>03_json데이터 가져오기  </title> 
<style>
    
</style>
<!-- jquery import -->
<script src="jquery-3.6.4.min.js"></script>  
</head>
<body>
<button> *JSON데이터 받아오기* </button>
<div id="panel"></div>
<script>
$("button").click(function(){
    $.ajax(
        "sungjuk.json",{
            dataType: "json", //누락시키는 경우 기본 text
            error:function(error){
                alert("error"+error);
            },
            success:function(result){
                //alert("success");
                //alert(result);      //서버가 응답해준 객체 형태의 데이터
                //alert(result.length);
                //배열 형태로 가져오기
                let size=result.length;
                let str="<table border='1'>";
                for(i=0;i<size;i++){
                        str +="<tr>"
                        str += "<td>" +result[i].name +"</td>";    
                        str += "<td>" +result[i].id +"</td>";    
                        str += "<td>" +result[i].kor +"</td>";    
                        str += "<td>" +result[i].eng +"</td>";    
                        str += "<td>" +result[i].mat +"</td>"; 
                        str +="</tr>";
                    }
                    str +="</table>";
                    
                    //목록 추가하기
                   //$("#panel").html(str);
                   //$("#panel").text(str);
                   $("#panel").append(str);
            }

            }
    );
});

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

AJAX-데이터 받아오기

다음 포스트

AJAX-목록보여주기

0개의 댓글