WordPress 에서 AJAX 기술 을 이용 하여 평론 제출 의 실현 예

WordPress 의 Ajax 상호작용 연구 에 관심 이 많 고 이 분야 의 기술 에 도 관심 이 많 습 니 다. WordPress Ajax 에 대해 서 는 Ajax 제출 에 대해 언급 할 수 밖 에 없습니다. 블 로그, 포럼 평론 의 Ajax 제출 은 사용자 체험 을 개선 할 뿐만 아니 라 서비스 비용 도 대폭 줄 일 수 있 습 니 다.한 페이지 를 다시 구성 하 는 것 보다 한 개의 댓 글 내용 을 출력 하 는 것 이 훨씬 간단 하기 때문이다.비록 현재 방 문 량 이 비교적 낮 고 서버 스트레스 문제 가 존재 하지 않 지만 사용자 체험 을 중시 해 온 저 는 이런 사용자 체험 을 향상 시 키 는 기 회 를 포기 할 수 없습니다.오늘 오후 내 내 시간 을 내 서 이 주제 의 Ajax 댓 글 을 초보 적 으로 제출 하 였 습 니 다.
직접 단도직입적으로 코드 에 올 라 갑 니 다. (원리 와 사고방식 은 마지막 에 있 습 니 다) 자신의 주제 에 따라 구조 가 다 르 기 때문에 다음 코드 는 스스로 조정 하 십시오.
WordPress Ajax 는 테마 function. php 파일 에 다음 부분 을 추가 합 니 다.

//          yinheli        ，      、          。
//yinheli     ，          。
//Edited by XiangZi DEC.17TH 2011
function fail($s) {//       
  header('HTTP/1.0 500 Internal Server Error');
  echo $s;
  exit;
}
function ajax_post_comment_slow (){
 fail('       ？     ！');
}
//        。
add_filter('comment_flood_trigger','ajax_post_comment_slow', 0);
//       ，       
function ajax_comment(){
// Ajax php       
if($_POST['action'] == 'ajax_comment') {
  global $wpdb, $db_check;
    // Check DB
    if(!$wpdb->dbh) {
      echo('Our database has issues. Try again later.');
  die();
    } 
nocache_headers();
$comment_post_ID = (int) $_POST['comment_post_ID'];
 $status = $wpdb->get_row("SELECT post_status, comment_status FROM $wpdb->posts WHERE ID = '$comment_post_ID'");
if ( empty($status->comment_status) ) {
//          wp     。  ：include/comment.php
  do_action('comment_id_not_found', $comment_post_ID);
  fail('The post you are trying to comment on does not currently exist in the database.');
} elseif ( 'closed' == $status->comment_status ) {
  do_action('comment_closed', $comment_post_ID);;
  fail('Sorry, comments are closed for this item.');
} elseif ( in_array($status->post_status, array('draft', 'pending') ) ) {
  do_action('comment_on_draft', $comment_post_ID);
  fail('The post you are trying to comment on has not been published.');
}
$comment_author    = trim(strip_tags($_POST['author']));
$comment_author_email = trim($_POST['email']);
$comment_author_url  = trim($_POST['url']);
$comment_content   = trim($_POST['comment']);
// If the user is logged in
$user = wp_get_current_user();
if ( $user->ID ) {
  $comment_author    = $wpdb->escape($user->display_name);
  $comment_author_email = $wpdb->escape($user->user_email);
  $comment_author_url  = $wpdb->escape($user->user_url);
  if ( current_user_can('unfiltered_html') ) {
    if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) {
      kses_remove_filters(); // start with a clean slate
      kses_init_filters(); // set up the filters
    }
  }
} else {
  if ( get_option('comment_registration') )
    fail('   ？   ?');
}
$comment_type = '';
if ( get_option('require_name_email') && !$user->ID ) {
  if ( 6> strlen($comment_author_email) || '' == $comment_author )
    fail('Oopps,  [Name]   [email]  。');
  elseif ( !is_email($comment_author_email))
    fail('Oopps,    [Email]  。');
}
if ( '' == $comment_content )
  fail('            ？');
// Simple duplicate check
$dupe = "SELECT comment_ID FROM $wpdb->comments WHERE comment_post_ID = '$comment_post_ID' AND ( comment_author = '$comment_author' ";
if ( $comment_author_email ) $dupe .= "OR comment_author_email = '$comment_author_email' ";
$dupe .= ") AND comment_content = '$comment_content' LIMIT 1";
if ( $wpdb->get_var($dupe) ) {
  fail('     !   !');
}
$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID');
if( !$user->ID ){
 $result_set = $wpdb->get_results("SELECT display_name, user_email FROM $wpdb->users WHERE display_name = '" . $comment_author . "' OR user_email = '" . $comment_author_email . "'");
 if ($result_set) {
 if ($result_set[0]->display_name == $comment_author){
 fail('       ？');
 } else {
 fail('       ？');
 }
 }
}
$comment_id = wp_new_comment( $commentdata );
$comment = get_comment($comment_id);
 
if( !$user->ID ){
 setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
 setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
 setcookie('comment_author_url_' . COOKIEHASH, clean_url($comment->comment_author_url), time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
}
@header('Content-type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
 xz_comment($comment, null);//          ，       。
 die();
}
}
add_action('init', 'ajax_comment');

자바 script 에서 코드 주의: 다음 코드 는 Jquery 프레임 워 크 지원 이 필요 합 니 다.javascript onload 코드 에 다음 부분 을 추가 합 니 다.

if (jQuery('#commentform').length) {
  jQuery('#commentform').submit(function(){  
//       
//ID  commentform            ，           form  ID。
 var ajaxCommentsURL = window.location.href;
    jQuery.ajax({
      url: ajaxCommentsURL,
      data: jQuery('#commentform').serialize()+'&action=ajax_comment',  
      type: 'POST',
      beforeSend: function() {
        jQuery('#commenterror').hide();
        jQuery('#commentload').fadeIn();
      },
      error: function(request) {  //     
        jQuery('#commenterror').html(request.responseText);
        jQuery('#commentload').hide();  //   submit
        jQuery('#commenterror').fadeIn(); //   error 
      },
      success: function(data) {
        jQuery('textarea').each(function(){
          this.value='';
        });
        jQuery('#commenterror').fadeOut();
        if(jQuery(".commentlist li.comment").first().length != 0){jQuery(".commentlist li.comment").first().before(data)}  
        else {jQuery("ol.commentlist").append(data)}
        jQuery(".commentlist li.comment").first().hide(0,function(){$(this).slideDown(1000)});
        jQuery('#cmt-submit').attr('disabled', true).css({"background-color":"#6C6C6C","color":"#E0E0E0"});
        jQuery('#commentload').fadeOut(1600);
 setTimeout(function() {
        jQuery('#cmt-submit').removeAttr('disabled').css({"background-color":"#0086C5","color":"#FFFFFF"});
        },3000); 
      }
    });
    return false;
  } );
}

주: 코드 는 아직도 개선 수요 가 있 습 니 다. 시간 이 없 기 때문에 다시 진화 하지 않 았 습 니 다.
CSS 코드 css 임의의 부분 추가.

#commentload,#commenterror{
 display: none;
 margin: 5px 0 0 0;
 color:#D29A04;
 float: left;
 font-size:16px;
 padding:0 0 0 20px;
}
#commentload{
 background: url("img/loading.gif") no-repeat bottom left ;
}
#commenterror{
 background: url("img/error.png") no-repeat bottom left ;
}

원리, 사고방식 원리: 자 바스 크 립 트 는 데이터 php 응답 을 제출 하고 결 과 를 출력 합 니 다. 자 바스 크 립 트 는 제출 단 추 를 누 르 면 자 바스 크 립 트 는 제출 동작 을 캡 처 하여 제출 한 데이터 (Name, Email, Web, Comment - text) 를 캡 처 하고 자 바스 크 립 트 Jquery 모드 를 이용 하여 브 라 우 저 를 작성 하여 POST (Name, Email, Web, Comment - text) 를 제출 합 니 다.요청 한 WordPress Function. php 파일 에 요청 을 받 아들 이 는 함수, 즉 이 열 에 있 는 ajax 를 구성 합 니 다.comment 함수 가 요청 에 오류 가 없 으 면 정확 한 결 과 를 출력 합 니 다. 요청 에 오류 가 있 으 면 잘못된 결 과 를 출력 합 니 다. 자 바스 크 립 트 는 댓 글 목록 에 동적 으로 추가 하여 오류 결 과 를 얻 습 니 다. 알림 표시 줄 개선 스타일 에 동적 으로 추가 합 니 다. 저 는 정말 미 적 감각 이 없어 서 공부 하고 있 습 니 다.제출 단 추 는 반환 결 과 를 얻 을 때 까지 클릭 한 후 3 초 동안 회색 으로 변 하 는 실효 상태 일 것 입 니 다. 이 점 전에 이 컴퓨터 에서 테스트 를 했 기 때문에 제출 순간 에 알 아차 리 지 못 했 습 니 다. 원 격 테스트 를 할 때 발 견 했 지만 고 치 려 면 테스트 를 해 야 합 니 다. 시간 이 너무 촉박 하면 고치 지 않 고 개선 할 기회 가 있 습 니 다.
결론 적 으로 WordPress 주제 에서 댓 글 스타일 의 자유 성과 다양성 때문에 지금까지 통용 되 는 AJAX 댓 글 플러그 인 이 없 는 것 같 습 니 다. 일부 고수 들 도 자신의 블 로 그 를 최적화 시 키 는 동시에 사고 와 일부 통용 핵심 코드 를 발표 할 수 밖 에 없 기 때문에 멋 진 기능 을 실현 하려 면 높 은 사람 이 도와 주지 않 으 면 코드 를 잘 배 울 수 밖 에 없습니다.언젠가 두 껍 고 얇 은 머리 를 할 수 있 기 를 기대한다.효 과 는 스스로 댓 글 검증 을 제출 하 세 요.