Cara menggunakan AJAX untuk mendapatkan avatar pengguna komen secara tidak segerak dalam kemahiran WordPress_javascript

Selepas pengulas memasukkan alamat e-mel mereka, avatar pengulas diperoleh dan dipaparkan secara tidak segerak, saya rasa walaupun fungsi ini tidak dapat membawa banyak peningkatan kepada pengalaman pengguna, dan ia bukan fungsi praktikal, ia sekurang-kurangnya sangat. cool. Lihat Sesetengah laman web telah menambah fungsi ini, jadi saya juga menulis skrip kerana saya tidak mahu kesepian, jadi saya pergi terus ke prinsip dan kod.

Prinsip panggilan avatar dinamik tak segerak

• Dapatkan input pengguna
• Tapis input pengguna
• Lepaskan pembolehubah ke latar belakang
• Proses data di latar belakang dan kembalikan kod HTML avatar
• Dapatkan data pemulangan latar belakang dan muatkan kod HTML ke halaman semasa

Nampaknya banyak langkah, tetapi ia sebenarnya sangat mudah Kita hanya perlu mengubah suai tema kita untuk mencapai kesannya.

Tangkapan skrin fungsi mudah:

Pencapaian

Kod fungsi: JavaScript
Kod berikut perlu disepadukan ke dalam rangka kerja JQuery.
Pembolehubah apiurl ialah alamat fail antara muka php api anda, yang terdapat di bawah kod fail.
Fungsi ini tertumpu terutamanya pada tindakan kehilangan fokus kotak input e-mel.

 function getAvatar(authorEmail) {//获得头像代码封装函数
 var nowtime = Math.round(new Date().getTime() / 1000);
 $.get(apiurl, {
 action : "get_avatar",
 email : authorEmail,
 t : nowtime
 }, function(data) {
 $('#get-avatar-img').fadeOut('slow', function() {
 $('#get-avatar-img').html(data).fadeIn();
 })
 });
 }
 
 var avatarhtml = '<div id="get-avatar-img" style="display:none;">';
 avatarhtml += '</div>';
 $('#respond').append(avatarhtml);//添加头像HTML
 if($('#email').val().length > 1)
 getAvatar($('#email').val());//获得邮箱地址
 $('#email').focusout(function() {//email输入框失去焦点绑定的动作
 var authorEmail = $('#email').val();
 var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
 var flag = pattern.test(authorEmail);
 if(flag) {
 $('#get-avatar-img').html('载入头像中').fadeIn('fast');
 getAvatar(authorEmail);
 } else {
 alert('请输入正确邮箱地址');
 }
 })

Kod fungsi: PHP
Kod respons latar belakang, di sini saya menggunakan fail halaman yang berasingan untuk membalas,
Kelebihan ini ialah anda tidak perlu memanggil bahagian kod ini setiap kali anda membuka halaman,
Menjawab hanya apabila permintaan dibuat sepenuhnya menghapuskan kebimbangan keserasian ke belakang tema.
Sudah tentu, anda juga boleh memasang fungsi tindak balas pada cangkuk wp.

 $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : false ;
 
if($action){//留下以后添加功能的空间，你懂的。
 switch ($action) {
 case 'get_avatar':
 $email = isset($_REQUEST['email']) ? $_REQUEST['email']: false ;
 if($email){
 echo get_avatar($email,60);
 }
 break;
 
 default:
 echo "请求内容不充分";
 break;
 }
 }

Ringkasan
Jadi……. Sangat mudah, bukan?
Permintaan-> Balasan-> Tambah sebanyak tiga langkah.
Sudah tentu, untuk meningkatkan logik dan menyerlahkan organisasi, beberapa data yang diperlukan ditapis di sini
Terdapat juga beberapa salah penilaian, mari kita biarkan ini untuk berfikir.