Pelaksanaan mudah halaman teknologi thinkphp ajax tanpa menyegarkan

Dengan pembangunan Internet, teknologi bebas muat semula halaman telah menjadi cara yang lebih cekap untuk membangunkan halaman web, dan AJAX (JavaScript Asynchronous dan XML) ialah salah satu kaedah pelaksanaan. Artikel ini akan memperkenalkan cara melaksanakan teknologi AJAX tanpa muat semula dalam thinkphp.

1. Gambaran keseluruhan teknologi AJAX

AJAX ialah kaedah komunikasi tak segerak yang menggunakan teknologi JavaScript dan XML tanpa menyegarkan halaman, meningkatkan pengalaman interaksi pengguna. Khususnya, AJAX menghantar permintaan kepada pelayan melalui objek XMLHttpRequest Selepas pelayan mengembalikan data, ia secara dinamik mengubah suai kandungan halaman melalui JavaScript, dengan itu mencapai kesan bebas penyegaran halaman.

2. Struktur asas rangka kerja thinkphp

Di bawah rangka kerja thinkphp, kita perlu memahami struktur asasnya terlebih dahulu. Seni bina MVC rangka kerja thinkphp merangkumi tiga bahagian: Model, View dan Controller. Antaranya, Model bertanggungjawab terutamanya untuk memproses logik data, View bertanggungjawab untuk memaparkan halaman, dan Pengawal bertanggungjawab untuk memproses permintaan pengguna dan memanggil Model atau View untuk pemprosesan yang sepadan.

3. Langkah-langkah untuk melaksanakan teknologi tanpa penyegar AJAX

Berikut akan memperkenalkan langkah-langkah bagaimana untuk melaksanakan teknologi tanpa penyegaran AJAX di bawah rangka kerja thinkphp:

Langkah 1: Cipta Pengawal

Pertama, anda perlu mencipta Pengawal dalam projek untuk mengendalikan permintaan AJAX, dan mentakrifkan fungsi untuk pemprosesan data dan paparan halaman dalam Pengawal.

Mengambil "Demo" sebagai nama Pengawal, kodnya adalah seperti berikut:

<?php
namespace app\index\controller;

use think\Controller;

class Demo extends Controller
{
    public function doSomething()
    {
        // 数据处理代码
    }

    public function showSomething()
    {
        // 页面展示代码
    }
}

Langkah 2: Tulis kod permintaan AJAX

Dalam halaman, AJAX perlu ditulis melalui kod Permintaan JavaScript dan hantar permintaan ke fungsi pengendali Pengawal.

Kod adalah seperti berikut:

<script type="text/javascript">
    function ajaxRequest() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("content").innerHTML = xhr.responseText;
            }
        };
        xhr.open("GET", "/index/demo/doSomething", true);
        xhr.send();
    }
</script>

Dalam kod di atas, objek XMLHttpRequest xhr pertama kali dicipta, dan kemudian fungsi panggil balik ditakrifkan apabila statusnya berubah. Apabila xhr.readyState bersamaan dengan 4 dan xhr.status bersamaan dengan 200, ini bermakna permintaan AJAX berjaya Pada masa ini, data yang dikembalikan daripada pelayan akan mengubah suai kandungan halaman melalui JavaScript secara dinamik. Fungsi xhr.open() digunakan untuk menentukan kaedah permintaan dan alamat permintaan, dan fungsi xhr.send() digunakan untuk menghantar permintaan ke pelayan untuk diproses.

Langkah 3: Memproses permintaan dan mengembalikan data

Apabila pengguna mengklik butang atau melakukan operasi tertentu, fungsi ajaxRequest() yang ditulis dalam artikel sebelumnya akan dicetuskan, yang akan memanggil doSomething dalam fungsi Pengawal () mengendalikan permintaan. Fungsi doSomething() bertanggungjawab terutamanya untuk memproses logik data dan mengembalikan hasil pemprosesan ke halaman hujung hadapan.

Contoh kod:

public function doSomething()
{
    $data = array("name" => "Apple", "price" => "5.00");
    return json_encode($data);
}

Dalam kod di atas, tatasusunan $data yang mengandungi nama produk dan harga ditakrifkan dahulu, dan kemudian data ditukar kepada format JSON melalui json_encode() berfungsi dan dikembalikan.

Langkah 4: Paparkan data

Di halaman hujung hadapan, kita perlu menulis kod untuk memaparkan data. Di sini kami memanggil showSomething() dalam Pengawal untuk melaksanakan paparan data.

Contoh kod:

public function showSomething()
{
    $this->fetch('example');
}

Dalam kod di atas, fungsi $this->fetch() digunakan untuk memuatkan fail templat example.html yang disimpan dalam direktori pandangan, menyedari pameran data.

4. Ringkasan

Artikel ini memperkenalkan secara ringkas cara melaksanakan teknologi tanpa segar AJAX di bawah rangka kerja thinkphp. Dengan mengendalikan Pengawal, Paparan dan JavaScript, kami boleh mencapai interaksi halaman dengan mudah tanpa menyegarkan, meningkatkan kecekapan paparan dan interaktiviti pengguna halaman web.

Atas ialah kandungan terperinci Pelaksanaan mudah halaman teknologi thinkphp ajax tanpa menyegarkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!