Ringkasan kaedah interaksi data front-end dan back-end_Pengetahuan asas

Artikel ini sesuai untuk pemula yang mempunyai sedikit pengalaman dalam pembangunan kolaboratif bahagian hadapan dan belakang.

Tugasan HTML

Output kepada nilai atau nama data Elemen

<input type="hidden" value="<&#63;php echo $user_avatar;&#63;>" />
<div data-value="<&#63;php echo $user_avatar;&#63;>"></div>

Hasil pemaparan

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40"></div>

Gunakan JS untuk mendapatkan

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

Kelebihan:

Tidak menduduki pembolehubah global dan boleh diperoleh secara bebas oleh JS.

Cadangan penggunaan:

Sesuai untuk menghantar data ringkas, dan juga sangat sesuai untuk mengikat perhubungan antara berbilang data ringkas dan Elemen.

<ul>
<li>nimojs <span data-userid="1" >删除</span></li>
<li>nimo22 <span data-userid="2" >删除</span></li>
<li>nimo33 <span data-userid="3" >删除</span></li>
<li>nimo44 <span data-userid="4" >删除</span></li>
<li>nimo55 <span data-userid="5" >删除</span></li>
</ul>
<script>
$('span').on('click',function(){
  $.post('/ajax/remove/',$(this).data('userid'),function(data){
    // ...
  })
})
</script>

Tugasan JS

Isi data ke dalam pengisytiharan pembolehubah JavaScript .

<script>
var user_avatar = "<&#63;php echo $user_avatar;&#63;>";
// 渲染结果
// var user_avatar = "https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40";
</script>

Atau gunakan enjin templat bahagian belakang Smarty:

var user_avatar = "{$user_avatar}";

Kelebihan:
Menghantar data sangat mudah. Bahagian hadapan terus memanggil pembolehubah user_avatar untuk menggunakan data.

Kelemahan:

Untuk memindahkan data rentetan, pengguna_avatar pembolehubah global diduduki Apabila terdapat banyak data yang perlu dihantar, banyak pembolehubah global akan diduduki.
Jika data yang dikembalikan mengandungi pemisah baris, ia akan menyebabkan JS melaporkan ralat

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

Pengoptimuman:

Anda boleh menyimpan semua kandungan yang dikembalikan oleh bahagian belakang melalui pembolehubah tertentu yang ditunjuk, meminimumkan penggunaan pembolehubah global. Contoh:

// PHP 代码
var SERVER_DATA = {
  username: {$username},
  userid: {$userid},
  title: {$title}
}
// 渲染结果
var SERVER_DATA = {
  username: "NimoChu",
  userid: 1,
  title: 'F2E'
}

Cadangan penggunaan:

Gunakan kaedah ini apabila anda perlu memindahkan data ke JS secepat mungkin dan sangat yakin bahawa data itu stabil. Jika format data adalah kompleks, adalah disyorkan untuk menggunakan skrip untuk mengisi JSON atau AJAX untuk mendapatkan JSON.

skrip mengisi JSON
Apakah JSON?

Isi data JSON ke dalam teg dan bahagian hadapan memperoleh rentetan JSON melalui DOM dan menghuraikannya menjadi objek.

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

Kelebihan:

Data boleh diperolehi selepas halaman dimuatkan. Ia tidak menduduki pembolehubah global dan boleh melepasi sejumlah besar pengumpulan data.

Kelemahan:

Apabila jumlah data sangat besar, pemuatan awal halaman akan menjadi perlahan. Kelembapan bukan sahaja disebabkan oleh saiz fail, tetapi juga kerana pelayan memerlukan masa untuk menanyakan data dan mengembalikan koleksi Anda boleh menggunakan AJAX untuk mendapatkan JSON untuk menyelesaikan pemuatan atas permintaan dan menunggu memuatkan.

Cadangan penggunaan:

Sesuai untuk menghantar koleksi data besar yang diperlukan apabila DOM dimuatkan. Contohnya: bahagian hadapan mengawal pemaparan halaman, bahagian belakang mengisi sumber data JSON ke dalam dan bahagian hadapan menggunakan enjin templat JavaScript untuk memaparkan halaman.

AJAX Dapatkan JSON

Gunakan AJAX untuk mendapatkan data JSON

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2>用户信息</h2>
  <p id="info"><img src="loading.gif" /></p>
</div>
$('#showdata').on('click',function(){
  $('#box').show();
  $.getJSON('/ajax/userdata/',function(oData){
    // oData = {"username":"nimojs","userid":1}
    $('#info').html('用户名：' + oData.username + '<br>用户ID：' + oData.userid);
  })
})

Ini adalah contoh mendapatkan maklumat pengguna melalui AJAX. Prosesnya adalah seperti berikut:

Hanya maklumat paparan dipaparkan pada halaman
Pengguna mengklik untuk melihat maklumat
Paparkan maklumat pengguna dan memuatkan imej
Hantar permintaan AJAX ke pelayan untuk mendapatkan maklumat pengguna
Pelayan mengembalikan rentetan JSON dan $.getJSON secara automatik menukar rentetan JSON yang dikembalikan kepada objek
Isikan kandungan ke

Kelebihan:

Tidak menduduki pembolehubah global dan nod DOM, dan boleh mengawal keadaan pencetus untuk mendapatkan data secara bebas (apabila halaman dimuatkan, apabila pengguna mengklik untuk melihat maklumat atau apabila pengguna mengklik butang). Apabila mula mendapatkan data, anda boleh menggunakan ruang letak imej yang memuatkan untuk menggesa pengguna bahawa data sedang dibaca. Menghalang pemuatan halaman yang perlahan disebabkan oleh memuatkan semua data pada halaman.

Kelemahan:

Permintaan HTTP tambahan akan dihasilkan. Ia tidak boleh diperolehi serta-merta selepas DOM dimuatkan. Ia perlu menghantar permintaan dan menerima respons.

Cadangan penggunaan:

Sesuai untuk memuatkan maklumat bukan utama, menetapkan syarat pencetus (apabila pengguna mengklik untuk melihat maklumat), dan menyediakan gesaan menunggu bacaan data mesra.

WebSocket menghantar data dalam masa nyata
Jika permintaan dan respons AJAX dibandingkan dengan menghantar mesej teks ke pelayan dan menunggu pelayan membalas mesej teks, WebSocket adalah seperti membuat panggilan telefon ke pelayan.

Saya tidak akan memperkenalkan banyak tentang WebSocket di sini dilampirkan bahan rujukan:

Wiki:WebSocket
Bina aplikasi web masa nyata menggunakan HTML5 WebSocket
Ajax lwn WebSocket

Ringkasan
Terdapat tempat untuk setiap situasi dan tidak ada cara yang betul untuk melakukannya. Pilih kaedah pemerolehan data secara fleksibel mengikut situasi sebenar.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.