AJAX を使用して WordPress_javascript スキルでコメント ユーザーのアバターを非同期的に取得する方法

コメント投稿者がメールアドレスを入力すると、コメント投稿者のアバターが非同期で取得され、表示されます。個人的には、この機能はユーザーエクスペリエンスに大きな改善をもたらすわけではなく、実用的な機能ではありませんが、少なくとも非常に効果があると感じています。いくつかの Web サイトでこの機能が追加されているので、カプセル化する時間がなかったので、私もスクリプトを書きました。

アバターを非同期で動的に呼び出す原理

• ユーザー入力の取得
• ユーザー入力をフィルタリングします
• 変数をバックグラウンドに渡す
• バックグラウンドでデータを処理し、アバターの HTML コードを返します
• バックグラウンドの戻りデータを取得し、HTML コードを現在のページにロードします

手順がたくさんあるように見えますが、実際にはテーマを少し変更するだけで効果が得られます。

簡単な機能のスクリーンショット:

実績

関数コード: JavaScript
次のコードは JQuery フレームワークに統合する必要があります。
apiurl 変数は php API インターフェイス ファイルのアドレスで、ファイル コードの下にあります。
この機能は主に、メール入力ボックスのフォーカスを失うアクションに焦点を当てています。

 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('请输入正确邮箱地址');
 }
 })

関数コード: PHP
バックグラウンド応答コード。ここでは応答するために別のページ ファイルを使用します。
この利点は、ページを開くたびにコードのこの部分
を呼び出す必要がないことです。 リクエストが行われた場合にのみ応答することで、テーマの下位互換性の問題が完全に排除されます。
もちろんwpフックにresponse関数を実装することも可能です。

 $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;
 }
 }

概要
つまり……とてもシンプルですよね？
リクエスト→レスポンス→追加 合計3ステップ。
もちろん、ロジックを強化し、組織を強調するために、必要なデータの一部がここでフィルタリングされます
いくつかの誤った判断もありますが、それは考えるために残しておきます。