JSFiddle - React, Tailwind, and code Playground

by Daniel Ha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-lg btn-warning" id="button" data-text-loading="Loading...">Press Me</button>

JavaScript

$('#button').button();

$('#button').click(function() {
		$('#button').html('<img  src="http://www.bba-reman.com/images/fbloader.gif" />');
    $.ajax({
    	url:"/echo/json/", //test url 임 형이 사용할 controller 위치로 바꾸세요
      type:"POST",
      data: {param:"test"}, //전달하고 싶은 data; controller 에서 request.getParameter("param");로 받으면됨.
      complete: function(response){// ajax 가 성공하면 실행될것 위 로딩 이미지를 이예제에서는 다시 press 로 바꿈
      	setTimeout(function(){ 
       	 $('#button').html('Press Me'); 
        },3000); // 3초 있다 다시 Press 로 바뀌게 해놧어요 예제로
        
      },
      error: function () {
            $('#button').html('Bummer: there was an error!');
        },
    });
});