Cara js berinteraksi dengan data thinkphp5

Dalam beberapa tahun kebelakangan ini, perkembangan pesat teknologi bahagian hadapan telah memberikan kemungkinan yang lebih baik untuk model pembangunan pemisahan bahagian hadapan dan belakang. Dalam pembangunan, JavaScript (pendek kata JS), sebagai bahasa pembangunan front-end yang biasa digunakan, juga telah menjadi bahagian yang sangat diperlukan dalam pembangunan front-end. Dalam kes ini, cara JS berinteraksi dengan rangka kerja bahagian belakang php5 (pendek kata TP5) telah menjadi salah satu isu yang dibimbangkan oleh pembangun. Dalam artikel ini, saya akan memperkenalkan kaedah interaksi data antara JS dan tp5 secara terperinci dari beberapa aspek.

1. Kaedah interaksi data bahagian hadapan dan bahagian belakang

Biasanya terdapat dua kaedah interaksi data bahagian hadapan dan bahagian belakang: segerak dan tak segerak. Kaedah segerak bermaksud bahawa selepas bahagian hadapan menghantar permintaan, ia mesti menunggu bahagian belakang untuk memulangkan data sebelum membalas kaedah tak segerak Selepas bahagian hadapan memulakan permintaan, ia boleh meneruskan laksanakan ke bawah dan tunggu data bahagian belakang kembali sebelum diproses.

Dalam pembangunan sebenar, kaedah penyegerakan semakin kurang digunakan kerana kekurangannya seperti ketinggalan. Kaedah asynchronous telah menjadi kaedah utama untuk interaksi data front-end dan back-end. Dalam perbincangan berikut, kami akan menerangkan terutamanya kaedah berinteraksi antara data JS dan tp5 dalam mod tak segerak.

2. Gunakan ajax untuk merealisasikan komunikasi tak segerak

Dalam komunikasi tak segerak, terasnya ialah menggunakan ajax untuk merealisasikan komunikasi data bahagian hadapan dan belakang. Ajax ialah singkatan daripada Asynchronous JavaScript dan XML (asynchronous JavaScript and XML) Ia adalah teknologi komunikasi tak segerak menggunakan JavaScript. Ia boleh mengemas kini bahagian halaman tanpa memuat semula keseluruhan halaman.

Apabila menggunakan ajax, kita perlu menulis kod JS di bahagian hadapan dan kod tp5 di bahagian belakang. Selepas bahagian hadapan menghantar permintaan ajax, bahagian belakang akan mengembalikan data Json (ia juga boleh menjadi data dalam format XML) selepas menerima permintaan. Data dikembalikan dan diproses oleh JS bahagian hadapan.

Berikut ialah kes dalam pembangunan sebenar Atas dasar ini, pelaksanaan khusus interaksi tak segerak antara JS dan tp5 diperkenalkan secara terperinci.

Langkah satu: Tulis kod bahagian hadapan pada bahagian hadapan

Kami mula-mula menulis halaman untuk menetapkan kebenaran pengguna pada bahagian hadapan. Halaman perlu melaksanakan dua operasi: menambah dan memadam kebenaran. Di sini, kami mengambil operasi "tambah" sebagai contoh untuk menggambarkan.

Kita perlu menulis butang pada halaman terlebih dahulu supaya selepas mengklik butang tersebut, borang untuk mengisi maklumat kebenaran akan muncul. Pada masa yang sama, untuk memaparkan maklumat kebenaran dengan mudah, kami juga perlu menulis jadual pada halaman untuk memaparkan semua maklumat kebenaran.

Gunakan kod JS berikut untuk menjana jadual HTML untuk memaparkan maklumat kebenaran.

function getAuthorityTable() {
    $.ajax({
        type: "GET",
        url: "/index/getAuthorityTable",
        dataType: "json",
        success: function (data) {
            var table = "<table><thead><tr><th>权限编号</th><th>权限名</th><th>操作</th></thead><tbody>";
            for (var i = 0; i < data.length; i++) {
                table += "<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["authority_name"] + "</td><td><button onclick='deleteAuthority(" + data[i]["id"] + ")'>删除</button></td></tr>";
            }
            table += "</tbody></table>";
            $("#authorityTable").html(table);
        }
    });
}

Di sini kami menggunakan ajax untuk mendapatkan data back-end secara tidak segerak dan menjana jadual HTML yang terdiri daripada tiga bahagian: nombor kebenaran, nama kebenaran dan operasi pemadaman. Antaranya, kaedah getAuthorityTable() mentakrifkan URL permintaan bahagian hadapan dan menjana jadual HTML daripada hasil permintaan untuk dipaparkan pada halaman.

Langkah 2: Tulis kod tp5 pada bahagian belakang

Kami perlu menulis kaedah pada bahagian pelayan untuk membalas permintaan URL. Dalam tp5, kita boleh menggunakan pengawal dan model untuk dilaksanakan.

Sebagai contoh, kami boleh menambah kaedah setAuthority dalam pengawal Indeks pengawal:

public function setAuthority()
{
    $authority_name = input('post.authority_name');
    $model = new Authority();
    if ($model -> add_authority($authority_name)) {
        $this -> success('添加权限成功!');
    } else {
        $this -> error('添加权限失败！');
    }
}

Dalam kod di atas, kami menggunakan kaedah input untuk menerima parameter POST dan memanggil kaedah add_authority dalam Kelas model kuasa Tambah maklumat kebenaran. Akhir sekali, kaedah $this->success dan $this->error terbina dalam tp5 digunakan untuk mengembalikan maklumat status untuk memaklumkan bahagian hadapan tentang kejayaan atau kegagalan operasi.

Langkah 3: Gunakan JS untuk menghantar permintaan di bahagian hadapan

Kita perlu melaksanakan dalam kod JS bahagian hadapan, selepas mengklik butang, hantar permintaan ke bahagian belakang dan dapatkan respons dikembalikan oleh bahagian belakang.

Ambil operasi penambahan kebenaran sebagai contoh dan laksanakan operasi ini dalam acara klik butang.

function addAuthority() {
    var authority_name = $("#authorityName").val();
    $.ajax({
        type: "POST",
        url: "/index/setAuthority",
        dataType: "json",
        data: {authority_name: authority_name},
        success: function (data) {
            alert(data.msg);
        }
    });
}

Dalam kod di atas, kami menggunakan kaedah POST untuk menghantar permintaan kepada pelayan, menghantar "authority_name" sebagai parameter kepada pengawal SetAuthority. Seterusnya, data.msg digunakan untuk mengembalikan maklumat status operasi.

3. Perkara lain yang memerlukan perhatian

Selain perkara di atas, terdapat beberapa perkara yang perlu diberi perhatian:

1 asynchronous, dan nama domain Mereka adalah front-end dan back-end masing-masing Untuk memastikan keselamatan, JS front-end dan back-end tidak berada di bawah nama domain yang sama. Pada masa ini, anda perlu mempertimbangkan untuk menyelesaikan masalah permintaan merentas domain. Penyelesaian biasa termasuk menggunakan JSONP, menambah Header di bahagian belakang, dsb.

2. Serangan CSRF: Memandangkan permintaan asynchronous ajax boleh membawa kepada isu keselamatan pemalsuan permintaan merentas tapak (CSRF), tp5 telah menggunakan kaedahnya sendiri untuk menghalang serangan CSRF, yang boleh diubah suai dalam fail thinkconfig.php semasa pembangunan parameter.

3. Pengesahan interaksi bahagian hadapan dan belakang: Untuk memastikan keselamatan sistem, pengesahan diperlukan semasa proses interaksi data bahagian hadapan dan belakang Anda boleh menggunakan Pengesah tp5 kelas untuk operasi yang berkaitan.

4. Pemprosesan data JSON: Memandangkan data format JSON perlu diproses semasa permintaan asynchronous ajax, JS bahagian hadapan sering menggunakan kaedah Json.stringify, JSON.parse dan lain-lain untuk melaksanakan operasi yang berkaitan.

Ringkasnya, interaksi data antara JS dan tp5 dilaksanakan berdasarkan kaedah komunikasi asynchronous ajax. Selagi kami memahami kaedah komunikasi JS dan tp5 serta mempelajari alatan dan kaedah yang sepadan, kami boleh menyelesaikan pembangunan laman web dengan lebih cekap. Pada masa yang sama, semasa proses pembangunan, kami juga perlu mempertimbangkan beberapa isu keselamatan dan pengesahan. Saya harap artikel ini dapat memberi manfaat kepada pembaca.

Atas ialah kandungan terperinci Cara js berinteraksi dengan data thinkphp5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!