집 > 기사 > 웹 프론트엔드 > jquery를 사용하여 부분 새로 고침 td 구현

jquery를 사용하여 부분 새로 고침 td 구현

WBOY원래의: 2023-05-23 21:35:07656검색

현대 웹 개발에서는 페이지 콘텐츠의 일부를 업데이트하기 위해 AJAX를 사용해야 하는 경우가 많습니다. jQuery는 간단한 구문과 풍부한 기능을 제공하여 부분 새로 고침을 보다 편리하게 수행할 수 있는 매우 인기 있는 JavaScript 라이브러리입니다.

이 글에서는 jQuery를 사용하여 부분 새로 고침 td를 구현하는 방법을 소개하여 페이지가 사용자 작업에 보다 원활하고 빠르게 응답할 수 있도록 합니다.

HTML 페이지 만들기

먼저, 업데이트해야 하는 데이터를 사용자에게 표시하는 테이블이 포함된 HTML 페이지를 만들어야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部刷新td</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id="1">
                <td class="id">1</td>
                <td class="name">Apple</td>
                <td><a href="#" class="update">更新</a></td>
            </tr>
            <tr data-id="2">
                <td class="id">2</td>
                <td class="name">Banana</td>
                <td><a href="#" class="update">更新</a></td>
            </tr>
            <tr data-id="3">
                <td class="id">3</td>
                <td class="name">Cherry</td>
                <td><a href="#" class="update">更新</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

이 페이지에서는 세 개의 데이터 행이 있는 테이블을 정의합니다. 각 행에는 ID와 이름, 그리고 "업데이트" 링크가 포함되어 있습니다. 이후에 쉽게 획득할 수 있도록 데이터 행의 ID 정보가 data-id 속성에 저장됩니다.

jQuery 코드 작성

다음으로 부분 새로 고침을 달성하기 위해 jQuery 코드를 작성해야 합니다. 구체적으로 다음을 수행해야 합니다.

최신 데이터를 가져오기 위해 AJAX 요청을 보냅니다. td 내용입니다.

$(function() {
    $('a.update').click(function(e) {
        e.preventDefault();
        var row = $(this).closest('tr');
        var id = row.data('id');
        $.ajax({
            url: '/api/data/' + id, // 这里是获取最新数据的API地址，根据需求修改
            dataType: 'json',
            success: function(data) {
                row.find('.name').text(data.name); // 更新名称字段
            }
        });
    });
});

이 코드에서는 먼저 jQuery의 가장 가까운 함수를 사용하여 "업데이트" 링크가 있는 행을 찾은 다음 데이터 함수를 사용하여 해당 행의 ID 데이터를 가져옵니다. 다음으로, 최신 데이터를 얻기 위해 ajax 함수를 사용하여 API 주소로 GET 요청을 보냅니다. 획득이 성공하면 찾기 기능을 사용하여 이름 필드를 찾고 텍스트 기능을 사용하여 필드 내용을 업데이트합니다.
API 코드 작성

앞서 jQuery 코드를 작성했지만 최신 데이터를 제공하려면 API도 필요합니다. 다음은 필요에 맞게 수정할 수 있는 간단한 Node.js Express 애플리케이션 예제입니다.

const express = require('express')
const app = express()

const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' }
]

app.get('/api/data/:id', (req, res) => {
    const id = req.params.id
    const item = data.find(item => item.id == id)
    res.json(item)
})

app.listen(3000, () => console.log('Server started on port 3000'))

이 API에서는 ID 매개변수를 받아들이고, 데이터 배열에서 데이터를 조회하고, 결과를 JSON 형식으로 반환하는 간단한 GET 요청 핸들러를 제공합니다. 이 API는 단지 예시일 뿐이므로 특정 요구 사항에 맞게 수정해야 합니다.

예제 실행

이제 jQuery 코드와 API 코드 작성이 완료되었습니다. 다음으로 서비스를 시작하고 HTML 페이지에 액세스해야 합니다.

먼저 명령줄을 사용하여 프로젝트 디렉터리에 들어간 다음 API 서비스를 시작해야 합니다.

node app.js

그런 다음 브라우저에서 index.html 파일을 열면 세 개의 데이터 행이 포함된 테이블을 볼 수 있습니다. . "업데이트" 링크를 클릭하면 jQuery 코드가 API에 AJAX 요청을 보내고 테이블 행의 이름 필드를 업데이트합니다.

요약

이 기사에서는 jQuery를 사용하여 부분 새로 고침 td를 구현하는 방법을 소개했습니다. 특히 테이블이 포함된 HTML 파일을 만들고 일부 jQuery 코드를 작성하여 업데이트를 구현했습니다. 또한 최신 데이터를 제공하기 위해 간단한 API를 작성했습니다.

jQuery는 웹 개발을 더 쉽게 만들기 위해 풍부한 기능과 구문을 제공하는 인기 있는 JavaScript 라이브러리입니다. 부분 새로 고침을 구현해야 할 때 탁월한 선택입니다. 아직 사용해보지 않으셨다면 꼭 사용해 보세요.

위 내용은 jquery를 사용하여 부분 새로 고침 td 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript node.js json jquery ajax html express JS 事件 td

성명：

이전 기사：jquery는 HTML 요소 숨기기다음 기사：jquery는 HTML 요소 숨기기