[10] 230613 팀 프로젝트 (3) 10일 차) Ajax 코드 및 링크 글들

The Java code you have implemented handles the server-side logic, such as updating the 'visible' column in the MySQL database when the button is clicked. 
The JavaScript code, on the other hand, handles the client-side behavior, which is updating the button text dynamically
without reloading the page. 

When the button is clicked, the JavaScript code will execute in the browser, and you can make an asynchronous request to the server-side Java code using AJAX or fetch API to update the database. 
Once the response is received, you can then update the button text in the browser using JavaScript.

<button id="toggleButton" data-itemname="actualitemname" data-visibility="Y">Stop using</button>

<script>
  var toggleButton = document.getElementById("toggleButton");

  toggleButton.addEventListener("click", function() {
    var itemName = toggleButton.getAttribute("data-itemname");
    var visibility = toggleButton.getAttribute("data-visibility");
    
    // Make an AJAX request to update the column value in MySQL
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/itemDetails/" + itemName + "/toggleVisibility", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // Update the button's text and visibility attribute based on the response
        if (visibility === "Y") {
          toggleButton.textContent = "Start using";
          toggleButton.setAttribute("data-visibility", "N");
        } else {
          toggleButton.textContent = "Stop using";
          toggleButton.setAttribute("data-visibility", "Y");
        }
      }
    };
    xhr.send();
  });
</script>

<script>
    var button = document.getElementById('toggleButton');

    button.addEventListener('click', function() {
        if (button.innerText === '사용 중지') {
            button.innerText = '재사용';
        } else {
            button.innerText = '사용 중지';
        }

        // Call the toggleVisibility function passing the name as a parameter
        toggleVisibility('${itemDetails.name}');
    });

    function toggleVisibility(name) {
        // Perform the necessary actions to update the visibility status in the database
        // You can use AJAX or make a form submission to your controller endpoint to handle the update

        // Example AJAX code
        // You need to adjust this code according to your backend setup
        $.ajax({
            url: '/itemDetails/' + name + '/toggleVisibility',
            type: 'POST',
            success: function(response) {
                // Handle the success response if needed
                console.log(response);
            },
            error: function(xhr, status, error) {
                // Handle the error response if needed
                console.log(xhr.responseText);
            }
        });
    }
</script>

function toggleVisibility(name) {
    // Make an AJAX request to update the data in the database
    // You can use libraries like jQuery or fetch API to make the AJAX request
    
    // Example using jQuery AJAX
    $.ajax({
        url: '/itemDetails/' + name + '/toggleVisibility',
        type: 'POST',
        success: function(response) {
            // Handle the success response
            // For example, you can update the button text or perform any other necessary actions
            console.log('Data updated successfully');
        },
        error: function(xhr, status, error) {
            // Handle the error response
            console.log('Error updating data:', error);
        }
    });
}

---

ajax를 사용해 서버에 데이터 저장하는 방법

---

https://terianp.tistory.com/95

데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사)

---

https://azderica.github.io/00-javascript-ajax/

[JavaScript] Ajax 정리 - Azderica

https://devyj.tistory.com/1

Ajax 란?

https://hei-jayden.tistory.com/248

[Ajax] Oracle DB로부터 데이터를 가져와서 출력하기

---

[62] 230328 Spring: 로그인 후 게시판 목록 보기, 회원 가입 후 MySQL DB에 추가하기 [K-디지털 트레이닝

[71] 230410 동기식, 비동기식, AJAX, Spring: 게시판 댓글 [K-디지털 트레이닝 71일]