텍스트에 값을 입력하고 해당 값을 기반으로 데이터베이스를 쿼리하도록 자바스크립트를 구현하는 방법

웹 애플리케이션의 개발로 JavaScript는 가장 인기 있는 클라이언트 측 언어 중 하나가 되었습니다. JavaScript는 동적 웹 페이지, 양식 유효성 검사, 대화형 사용자 인터페이스, 애니메이션 효과 등을 포함한 다양한 기능을 구현할 수 있습니다. 이번 글에서는 자바스크립트를 이용해 텍스트 박스에 값을 입력한 후 자동으로 데이터베이스를 쿼리하는 방법을 소개하겠습니다.

1. 쿼리 데이터 결정

JavaScript를 사용하여 데이터베이스를 쿼리하기 전에 쿼리하려는 데이터를 결정해야 합니다. 데이터베이스 쿼리를 사용하면 필요한 데이터 세트를 얻을 수 있습니다. 이 예에서는 이름, 성적 등과 같은 모든 학생에 대한 정보가 포함된 학생 관리 시스템 데이터베이스를 시뮬레이션합니다. 사용자가 입력란에 학생의 이름을 입력하면 학생의 성적 정보를 표시하기 위해 JavaScript를 사용하여 자동으로 데이터베이스에 쿼리해 보겠습니다.

2. 데이터베이스 연결 설정

데이터베이스를 쿼리하려면 데이터베이스에 연결해야 합니다. AJAX 기술을 사용하면 페이지를 새로 고치지 않고도 서버에 요청을 보내고 응답을 받을 수 있습니다. 이 예에서는 XMLHttpRequest 객체를 사용하여 AJAX 요청을 구현합니다. 다음은 데이터베이스 연결 설정의 예입니다.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应数据
    }
};
xmlhttp.open("GET", "getstudentinfo.php?q=" + str, true);
xmlhttp.send();

위 코드에서는 XMLHttpRequest 개체를 사용하여 새 AJAX 요청을 생성합니다. ReadyState가 변경되면 콜백 함수를 호출하여 응답 데이터를 처리합니다. 그 중 ReadyState 속성은 AJAX 요청의 상태를 나타내고, status 속성은 응답 상태 코드를 나타냅니다. open() 메소드를 호출하여 요청된 URL과 요청 유형("GET" 또는 "POST")을 지정할 수 있습니다. send() 메소드를 호출한 후 AJAX 요청이 서버로 전송됩니다.

3. 입력 상자 이벤트 듣기

사용자가 입력 상자에 문자를 입력하면 해당 결과를 얻기 위해 실시간으로 데이터베이스를 쿼리해야 합니다. 입력 상자 이벤트를 수신하기 위해 addEventListener() 메서드를 사용하여 이벤트 핸들러를 입력 상자와 연결할 수 있습니다. 다음은 입력 상자 이벤트를 수신하는 예입니다.

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    // 查询数据库
});

위 코드에서는 addEventListener() 메서드를 통해 "keyup" 이벤트 핸들러를 등록했습니다. 사용자가 입력 상자에 문자를 입력하면 이벤트가 트리거됩니다. . document.getElementById() 메서드를 통해 입력 상자 요소를 가져온 다음 value 속성을 사용하여 입력 상자의 값을 가져옵니다.

4. 데이터베이스를 쿼리하고 결과를 표시합니다

사용자가 입력 상자에 문자를 입력하면 해당 데이터를 얻기 위해 서버에 AJAX 요청을 보내야 합니다. 다음은 데이터베이스를 쿼리하고 결과를 표시하는 예입니다.

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "getstudentinfo.php?q=" + input_value, true);
    xmlhttp.send();
});

위 코드에서는 입력 값이 포함된 AJAX 요청을 서버에 보내고 서버는 학생 정보가 포함된 HTML 조각을 반환합니다. ReadyState가 변경되면 학생 정보를 표시하는 데 사용되는 결과 요소에 응답 데이터를 저장합니다.

5. 자동 완성 실현

입력창에 값을 입력할 때 데이터베이스에 자동으로 쿼리하는 것 외에도 자동 완성 기능도 구현할 수 있습니다. 사용자가 입력 상자에 문자를 입력하면 사용 가능한 옵션이 포함된 드롭다운 메뉴를 표시할 수 있습니다. 다음은 자동 완성을 구현하는 예입니다.

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var options = JSON.parse(this.responseText);
            var ul = document.getElementById("auto-complete");
            ul.innerHTML = "";
            for (var i = 0; i < options.length; i++) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(options[i]));
                a.setAttribute("href", "#");
                li.appendChild(a);
                ul.appendChild(li);
            }
            if (options.length > 0) {
                ul.style.display = "block";
            } else {
                ul.style.display = "none";
            }
        }
    };
    xmlhttp.open("GET", "getstudentnames.php?q=" + input_value, true);
    xmlhttp.send();
});

위 코드에서는 입력 값이 포함된 AJAX 요청을 서버에 보내고 서버는 사용 가능한 옵션이 포함된 JSON 배열을 반환합니다. 응답 데이터를 JavaScript 객체로 변환하기 위해 JSON.parse() 메서드를 사용합니다. 그런 다음 옵션이 포함된 정렬되지 않은 목록을 만들고 이를 자동 완성 요소에 추가합니다. 옵션 수가 0보다 크면 드롭다운 메뉴가 표시됩니다.

6. 결론

이 기사에서는 JavaScript를 사용하여 텍스트 상자에 값을 입력한 후 데이터베이스를 자동으로 쿼리하는 방법을 소개합니다. AJAX 기술과 이벤트 리스너를 사용하면 사용자 인터페이스와 상호 작용하는 강력하고 유연한 방법을 얻을 수 있습니다. JavaScript 및 AJAX 기술에 대해 자세히 알아보려면 문헌과 튜토리얼을 확인하세요.

위 내용은 텍스트에 값을 입력하고 해당 값을 기반으로 데이터베이스를 쿼리하도록 자바스크립트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!