jQuery - 비동기 함수 Ajax⑤ .getJSON

12008 단어 JavaScriptjqueryajaxJavaScript

5. Shorthand Methods - jQuery.getJSON( url [, data ][, success ] )

  • url : 요청을 보낼 주소(클라이언트가 HTTP 요청을 보낼 서버의 주소)
  • data : 요청과 함께 서버로 보낼 객체 또는 문자열 타입의 데이터
  • success : 요청이 성공일 때 실행될 콜백함수(Function(PlainObject data, String textStatus, jqXHR jqXHR)

GET 으로 데이터를 전송하고 JSON으로 받을 때 사용
.getJSON()은 .ajax()에서 datatype이 json인 것과 동일하다

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

활용할 Ex6_json.json 파일

[
	{"num":"1","Name":"hong"},
	{"num":"2","Name":"kim"},
	{"num":"3","Name":"park"},
	{"num":"","Name":"you"}
]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn .btnload').click(function(){
                $.getJSON("Ex05_json.json", function(data){
                    console.log(data);

                    let table = "<table border='1'>";
                    table += "<tr><th>INDEX</th><th>NUM</th><th>NAME</th></th>";
                        $.each(data, function(index, obj){
                            table += "<tr>";
                                table += "<td>" + index + "</td>";
                                table += "<td>" + obj.num + "</td>";
                                if(obj.num) {
                                    table += "<td>" + obj["Name"] + "</td>";
                                } else {
                                    table += "<td>" + "EMPTY" + "</td>";
                                }
                            table += "</tr>";    
                    });
                    table += "</table>";
                    $('#display').html(table);
                });
            });
        });
    </script>
</head>
<body>
    <div id="btn" >
		<div class="btnload">JSON DATA LOAD</div>
	 </div>
	<div id="display">
	</div>
</body>
</html>

jsp: the code is exceeding the 65535 bytes limit
데이터 구조의 직접 삽입 정렬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage