[jQuery] keyup 메소드를 사용하여 입력 값에 따라 서버 통신하기

26 Dec 2023

jQuery

jQuery에서 기본적으로 input 요소의 값이 변경될 때 사용자가 입력한 값을 즉시 서버로 전송하는 기능을 구현할 수 있습니다. 이를 위해서는 keyup() 메소드를 사용하여 input 요소의 텍스트 변경 이벤트를 감지하고, 해당 이벤트가 발생할 때마다 서버로 데이터를 전송할 수 있습니다.

1. HTML 파일 작성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>입력 값으로 서버 통신</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" id="inputField">

<script>
    $(document).ready(function(){
        $('#inputField').keyup(function(){
            var value = $(this).val();
            $.ajax({
                url: 'your_server_endpoint',
                method: 'POST',
                data: {inputValue: value},
                success: function(response){
                    console.log('서버 응답: ' + response);
                    // 여기서 서버 응답을 처리할 수 있습니다.
                }
            });
        });
    });
</script>

</body>
</html>

위의 HTML 파일에서는 텍스트 입력란이 있고, 입력 값이 변경될 때마다 서버로 값을 전송하는 JavaScript 코드가 포함되어 있습니다.

2. JavaScript 코드 설명

$(document).ready() 함수는 HTML 문서가 로드된 후에 jQuery 코드를 실행하도록 보장합니다.
$('#inputField').keyup()는 input 요소의 값이 변경될 때마다 이를 감지합니다.
$.ajax() 함수를 사용하여 서버로 데이터를 전송합니다.
- url에는 서버의 엔드포인트 주소를 지정합니다.
- method에는 HTTP 요청 방식을 지정합니다 (예: ‘POST’).
- data에는 서버로 전송할 데이터를 지정합니다.
- success 콜백 함수는 서버에서 응답이 도착했을 때 실행됩니다.

1. HTML 파일 작성

2. JavaScript 코드 설명

3. 참고 자료