jquery에서 입력 키워드 쿼리 기능을 구현하는 방법

JQuery는 현재 가장 널리 사용되는 JavaScript 라이브러리 중 하나이며, 개발 작업을 크게 단순화할 수 있는 다양한 기성 API와 다양한 개발 및 패키징 도구를 제공합니다. 이 기사에서는 JQuery를 사용하여 키워드 쿼리를 입력하는 방법을 소개합니다.

1. 준비

JQuery의 입력 키워드 쿼리를 사용하기 전에 다음 URL을 통해 다운로드할 수 있는 JQuery 라이브러리 파일을 html 파일에 도입해야 합니다.

https://jquery.com/download/

동시에 입력 상자와 쿼리 버튼을 추가해야 합니다. 코드는 다음과 같습니다.

<label>请输入关键字：</label>
<input>
<button>查询</button>

2. JQuery를 사용하여 입력 키워드 쿼리를 구현합니다.

먼저 html 파일에 테이블을 추가하여 쿼리를 표시합니다. 결과.

                                                                       

姓名	年龄	性别

다음으로 JavaScript 파일에서 JQuery의 이벤트 리스너를 사용합니다. 쿼리 버튼을 클릭하면 입력 상자에 키워드를 가져온 다음 JQuery의 AJAX 요청을 통해 쿼리 결과를 테이블에 표시합니다.

$(document).ready(function() {
    $("#search").click(function() {
        var keyword = $.trim($("#keyword").val());
        $.ajax({
            type: "GET",
            url: "search.php",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(data) {
                var tr = "";
                $.each(data, function(index, value) {
                    tr += "<tr>";
                    tr += "<td>" + value.name + "</td>";
                    tr += "<td>" + value.age + "</td>";
                    tr += "<td>" + value.gender + "</td>";
                    tr += "</tr>";
                });
                $("tbody").empty().append(tr);
            }
        });
    });
});

그 중 search.php는 백그라운드에서 데이터를 처리하는 파일입니다. 백그라운드에서 입력된 키워드를 기반으로 데이터 쿼리를 수행하고 쿼리 결과를 반환해야 합니다.

3. 전체 코드

HTML 파일:

<label>请输入关键字：</label>
<input>
<button>查询</button>

                                                                       

姓名	年龄	性别

JavaScript 파일:

$(document).ready(function() {
    $("#search").click(function() {
        var keyword = $.trim($("#keyword").val());
        $.ajax({
            type: "GET",
            url: "search.php",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(data) {
                var tr = "";
                $.each(data, function(index, value) {
                    tr += "<tr>";
                    tr += "<td>" + value.name + "</td>";
                    tr += "<td>" + value.age + "</td>";
                    tr += "<td>" + value.gender + "</td>";
                    tr += "</tr>";
                });
                $("tbody").empty().append(tr);
            }
        });
    });
});

4. 요약

위는 JQuery 입력 키워드 쿼리의 구현 방법입니다. JQuery 및 AJAX 요청을 사용하면 쉽게 입력을 완료할 수 있습니다. key 단어 쿼리 기능은 개발 효율성을 크게 향상시켰습니다. 실제 사용 시에는 SQL 인젝션과 같은 보안 문제를 방지하기 위해 실제 상황을 기반으로 일부 데이터 검증 및 필터링 작업을 수행해야 한다는 점은 주목할 만합니다.

위 내용은 jquery에서 입력 키워드 쿼리 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!