Bagaimana untuk merealisasikan halaman borang tanpa melompat ke penomboran dalam php

Dengan perkembangan pesat teknologi Internet, halaman borang telah menjadi keperluan biasa untuk pembangunan laman web. Dalam halaman borang, biasanya perlu untuk melaksanakan fungsi paging untuk memaparkan data dengan lebih baik. Walau bagaimanapun, kaedah paging tradisional memerlukan lompat ke halaman baharu, yang mungkin mengurangkan pengalaman pengguna dan prestasi tapak web. Dalam PHP, kita boleh menggunakan teknologi AJAX dan pemalam paging untuk merealisasikan halaman borang tanpa melompat ke penomboran, supaya pengguna boleh mengendalikan halaman dengan lebih lancar, dan pada masa yang sama, ia juga meningkatkan kecekapan laman web.

1. Teknologi AJAX

AJAX (Asynchronous JavaScript And XML) ialah teknologi untuk kemas kini dinamik pada halaman Web. Ia boleh mengemas kini sebahagian daripada data tanpa menyegarkan keseluruhan halaman. Dengan cara ini, kita boleh melaksanakan fungsi paging pada halaman borang tanpa melompat ke halaman baharu.

Apabila menggunakan teknologi AJAX untuk melaksanakan paging, kami perlu memperkenalkan perpustakaan jQuery dan pemalam paging terlebih dahulu. Antaranya, jQuery ialah salah satu perpustakaan JavaScript yang paling popular pada masa ini, dan pemalam paging boleh membantu kami melaksanakan fungsi paging dengan cepat, seperti pemalam jQuery Paging yang biasa digunakan.

Seterusnya, mari kita lihat cara menggunakan AJAX dan pemalam paging untuk mencapai penomboran pada halaman borang tanpa melompat.

2. Langkah-langkah pelaksanaan

1 Persediaan

Pertama, kita perlu menambah kawasan untuk memaparkan data dan kawasan untuk memaparkan halaman dalam halaman borang . Di sini kita boleh menggunakan elemen div untuk mencipta dua kawasan.

<div id="dataArea"></div>
<div id="pagination"></div>

2. Hantar permintaan AJAX

Seterusnya, kami perlu menghantar permintaan AJAX dalam kod JavaScript untuk mendapatkan data bernombor. Kami boleh menggunakan kaedah $.ajax() jQuery untuk menghantar permintaan dan lulus parameter yang diperlukan, seperti nombor halaman semasa, bilangan item data yang dipaparkan pada setiap halaman, dsb.

function loadData(page) {
    $.ajax({
        type: "GET",
        url: "data.php",
        data: {
            page: page,
            pageSize: 10
        },
        success: function(data) {
            // 分页数据处理代码
        },
        error: function() {
            alert("获取数据失败！");
        }
    });
}

Apabila menghantar permintaan, kami perlu menentukan jenis permintaan dan alamat permintaan, serta lulus parameter yang diperlukan. Di sini, kami menggunakan kaedah permintaan GET, tentukan halaman permintaan data sebagai data.php, dan lulus nombor halaman semasa dan bilangan item data yang dipaparkan pada setiap halaman sebagai dua parameter.

3. Memproses data paging

Apabila permintaan berjaya, kami boleh memproses data yang dikembalikan dalam fungsi panggil balik kejayaan. Di sini, kami boleh menggunakan kaedah yang disediakan dalam pemalam paging untuk memaparkan data ke lokasi yang sepadan pada halaman borang.

function loadData(page) {
    $.ajax({
        type: "GET",
        url: "data.php",
        data: {
            page: page,
            pageSize: 10
        },
        success: function(data) {
            // 将数据渲染到数据区
            $("#dataArea").html(data.data);

            // 渲染分页
            $("#pagination").paging({
                currentPage: page,
                totalPage: data.totalPage,
                callback: function(page) {
                    loadData(page);
                }
            });
        }
    });
}

Di sini, kami mula-mula memaparkan data yang dikembalikan selepas permintaan berjaya ke dalam kawasan data (data mungkin perlu diformatkan atau sebaliknya diproses mengikut situasi sebenar), dan kemudian menggunakan palam paging kaedah -in (), menjadikan komponen halaman dan menghantar nombor halaman semasa dan jumlah nombor halaman kepada komponen halaman. Akhir sekali, kami menentukan fungsi panggil balik paging Apabila pengguna mengklik butang paging, fungsi loadData() akan dipanggil semula untuk mendapatkan data yang sepadan.

4 Mulakan halaman

Untuk memaparkan data halaman apabila halaman pertama kali dimuatkan, kita perlu memanggil fungsi loadData() secara manual selepas halaman dimuatkan dan lulus huruf awal. parameter nombor halaman.

$(function() {
    loadData(1);
});

Setakat ini, kami telah berjaya melaksanakan fungsi halaman borang untuk tidak melompat ke penomboran. Pengguna boleh menukar nombor halaman secara bebas dalam komponen halaman, dan kawasan data akan mengemas kini data yang sepadan secara automatik mengikut perubahan dalam nombor halaman.

3. Ringkasan

Melalui kaedah pelaksanaan di atas, kami boleh dengan cepat dan mudah melaksanakan fungsi paging bukan lompat dalam halaman borang, supaya pengguna dapat mengendalikan halaman dengan lebih lancar, dan Memperbaiki kecekapan laman web. Sudah tentu, semasa penggunaan sebenar, beberapa pengubahsuaian dan penambahbaikan pada kod perlu dibuat berdasarkan keperluan perniagaan tertentu untuk mencapai pengalaman pengguna yang terbaik.

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan halaman borang tanpa melompat ke penomboran dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!