JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">AJAX</button>
<div id="notice">AJAX 통신 상태를 출력하는 영역입니다.</div>
<ul id="text">
  ajax로 가져온 값이 출력됩니다.
</ul>

JavaScript

var ajaxURL = 'https://jsonplaceholder.typicode.com/posts/1';

$('#btn').click(function(){
  $.ajax({
    url: ajaxURL,
    // 통신 성공 시 콜백 함수
    success: function(data){
      var jsonData = data;
      var titEle = '';
      var textEle = '';
      var result = '';
      
      for(var key in jsonData) {
        titEle = '<strong>' + key + '</strong>';
        testEle = '<div>' + jsonData[key] + '</div>';
        
        result = result + ('<li>' + titEle + testEle + '</li>');
      }
      
      $('#text').append(result);
      
      console.log('----- success -----');
      console.log(data);
      $('#notice').empty().append('통신이 완료되었습니다.');
    },
    // 에러 발생 시 콜백 함수
    error: function (data) {
      console.log('----- error -----');
      console.log(data);
      $('#notice').empty().append('에러가 발생하였습니다.');
    },
  });
})