AJAX 기술을 사용하여 WordPress_javascript 기술로 의견을 제출하는 구현 예

저는 예전부터 WordPress의 Ajax 상호작용에 대한 연구에 관심이 있었고, WordPress Ajax에 대해 이야기할 때 블로그나 포럼 댓글로 Ajax를 언급하는 경우가 늘 있었습니다. 제출은 사용자 경험을 향상시킬 뿐만 아니라 서버 비용도 크게 줄일 수 있습니다. 결국 페이지를 재구성하여 출력하는 것보다 단일 댓글을 출력하는 것이 훨씬 간단합니다. 지금은 방문 횟수가 상대적으로 적고 서버 압박 문제도 없지만, 항상 사용자 경험에 관심을 기울여온 나로서는 사용자 경험을 향상시킬 수 있는 기회를 결코 포기할 수 없다. 나는 오늘 오후 시간을 보내며 이 주제에 대한 Ajax 코멘트의 예비 제출을 완료했습니다.

본론으로 바로 가서 코드에 도달하세요: (원칙과 아이디어는 마지막에 있습니다)
자신의 테마의 다양한 구조에 따라 다음 코드를 조정하세요.

WordPress Ajax 댓글 제출 PHP 코드
테마 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');

자바스크립트 코드
참고: 다음 코드에는 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가 응답하고 결과를 출력합니다
Javascript가 결과를 받아 표시합니다
아이디어:
제출 버튼을 클릭하면 Javascript가 제출 작업을 가로챕니다
제출된 데이터(이름, 이메일, 웹, 댓글 텍스트) 차단
Javascript Jquery를 사용하여 WordPress에 POST(이름, 이메일, 웹, 댓글 텍스트) 요청을 제출하는 브라우저를 시뮬레이션합니다
Function.php 파일에서 요청을 수락하는 함수, 즉 이 열의 ajax_comment 함수를 구성하세요.
요청에 오류가 없으면 올바른 결과가 출력됩니다
요청에 오류가 있는 경우 오류 결과를 출력합니다
올바른 결과를 얻기 위한 자바스크립트, 댓글 목록에 동적으로 추가됨
Javascript는 오류 결과를 얻고 이를 제출 프롬프트 표시줄에 동적으로 추가합니다
개선 사항
스타일에 관해서는 정말 미의식이 전혀 없어서 아직 배우는 중이에요.
제출 버튼은 반환 결과를 얻을 때까지 클릭한 후 3초 동안 회색으로 표시되고 유효하지 않습니다. 이 컴퓨터에서 테스트 중이었고 원격 테스트 중에 제출이 즉시 완료되었기 때문에 이전에는 이 사실을 알 수 없었습니다. 하지만 바꾸고 싶다면 바꿔야 해요. 시간이 너무 촉박하면 바꾸지 않을 거예요.

요약
WordPress 테마의 댓글 스타일이 자유롭고 다양하기 때문에 보편적인 AJAX 댓글 플러그인은 없었던 것 같습니다.
일부 전문가는 블로그를 최적화하는 동안 자신의 아이디어와 일부 공통 핵심 코드만 게시할 수 있습니다.
따라서 멋진 기능을 구현하려면 전문가의 도움이 필요합니다.
그렇지 않으면 코드만 열심히 공부해서 언젠가 많은 지식을 쌓을 수 있기를 바라겠습니다.
효과를 확인하려면 의견을 제출해 주세요.