WordPress_javascript 기술에서 AJAX를 사용하여 댓글 사용자의 아바타를 비동기적으로 얻는 방법

댓글 작성자가 이메일 주소를 입력하면 댓글 작성자의 아바타가 비동기적으로 획득되어 표시됩니다. 개인적으로 이 기능은 사용자 경험을 크게 향상시킬 수 없고 실용적인 기능은 아니지만 적어도 매우 유용하다고 생각합니다. 멋지네요. 일부 웹사이트에서는 이 기능을 추가하기도 했는데, 외로워지기 싫어서 스크립트를 작성하기도 했고, 그걸 요약할 시간이 없어서 바로 원리와 코드로 넘어갔습니다.

비동기 동적 아바타 호출의 원리

• 사용자 입력 받기
• 사용자 입력 필터링
• 백그라운드에 변수 전달
• 백그라운드에서 데이터를 처리하고 아바타의 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 후크에 마운트할 수도 있습니다.

 $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단계입니다.
물론 논리를 강화하고 구성을 강조하기 위해 필요한 일부 데이터는 여기에서 필터링됩니다
잘못된 판단도 있으니, 그냥 생각하도록 놔두자.