jquery에서 입력 키워드 쿼리 기능을 구현하는 방법-프런트엔드 Q&A-php.cn

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

PHPz

풀어 주다： 2023-04-07 14:03:19

원래의

755명이 탐색했습니다.

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

1. 준비

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

https://jquery.com/download/

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

<label for="keyword">请输入关键字：</label>
<input type="text" id="keyword">
<button id="search">查询</button>

로그인 후 복사

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

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

<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

로그인 후 복사

다음으로 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 for="keyword">请输入关键字：</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!