preface

Series of articles ：

Related articles ：

Before reading ：

  1. The following contents may need to add callback functions for sites that have achieved the effect of Ajax.
  2. The following content is completely applicable to the implementation of the instantclick site
  3. Contents marked with (*) are optional and can be omitted
  4. If you have any questions, you can send an email or comment directly, Don't ask me questions on QQ

code analysis

Basic knowledge of ajax

Here is a method at the bottom of jQuery ajax: $.ajax() , when this method is executed, a created XMLHttpRequest Object.

Basic syntax:

 $.ajax({ Url:,//The address to send the request Type:,//Request mode, post or get request Data:,//Data to be sent to the server error: function() { //Callback function for failed request execution }, success: function(data) {  //The callback function for successful request execution. The parameter data is the plain text HTML code of the page after successful request } })

Implementation steps

monitor comment_form Submission event of comment box ：
 $(comment_form).submit(function() {  //Submit Event }）
(*) Check whether the comment content and the author's email content comply with the rules (pre check) ：

This code is relatively simple and easy to understand. I won't repeat it, just read the code directly.

Initiate an ajax request ：

It is the most basic $. ajax() request:

 $.ajax({ Url: $(this). attr ('action '),//submit the action attribute of the form Type: $(this). attr ('method '),//submit the method attribute of the table form Data: $(this). serializeArray(),//Data to be sent to the server error: function() { //Write the prompt code here }, success: function(data) {  //This part will be explained in Step 4 } })

Depth screenshots_selected area_20170726235047.png

Get the data of the ajax request, find the content of the latest comment from the data, and insert the content into the current page ：

I have two ideas on how to find the latest comments from the data successfully returned by Ajax:

  1. from In the data returned by the successful ajax request Find Latest comments Insert into the current page.
  2. Directly at the time of submission, Take a variable to save the content submitted by the user, and then directly assemble a comment according to your comment structure Insert into the current page

I am the first method, so the following code analysis is only applicable to the first method.

  • First question: understand what data is returned after a successful ajax request?

The returned data is the html code of the page after the submission operation. In other words, the returned data is equivalent to The html code after manually refreshing the current page

Therefore, the latest comments can be found in the returned data!

  • The second question: How to find the content of the latest comment and where to insert it?

First of all, you have to make sure that your comments Show newer comments in front 。

Secondly, I simply divide user comments into two categories:

  1. Parent: directly comment on the
  2. Children: a comment in a comment article

Let's see how to find the latest comments:

In fact, it's very simple: typecho always gets bigger and bigger when generating commentIDs, so as long as you find the largest commentID in the data, it will be the latest comment commented by the user!

The code is:

 new_id = $(comment_list, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) { return a - b }).pop();

But it still exists One problem : If you enable the comment paging function, because typecho always displays the latest comment on the first page, when the user is not on the first page Parent comment , then the The comment with the largest ID is not the latest comment ，

At this time, after the ajax request is sent successfully, it is unnecessary to insert a comment to the current page, because the latest comment is the first page.

 if ($('.page-navigator .prev').length && parent_id == ""){ new_id = ''; }//Make a judgment ... If (new_id)//It will be inserted only when the new_id is not empty $('#' + parent_id + " .comment-children .comment-list").prepend(data);

Next is Insertion position problem :

In fact, it is very simple. If it is a parent comment, insert it directly into the comment_list At the front of:

 $(comment_list).prepend(data);

If it is a sub comment, you should Reply link When you click the reply button, you can find the current comment ID (parentID) of the reply through the parent element of the parent element (depending on the individual comment structure):

 $(comment_reply+'a'). click (function() {//Reply parent_id = $(this).parent().parent().parent().parent().attr("id"); $(textarea).focus(); }); $('# cancel comment reply link'). click (function() {//Cancel parent_id = ''; });

The insertion position is the first place to reply to the current comment:

 if (parent_id) { data = $('#comment-' + new_id, data).hide(); //  Get new comments if ($('#' + parent_id).find(".comment-children").length <= 0) { $('#' + parent_id).append("<div class='comment-children list-unstyled m-l-xxl'><ol class='comment-list'></ol></div>"); } If (new_id)//It will be inserted only when the new_id is not empty $('#' + parent_id + " .comment-children .comment-list").prepend(data); //Console. log ('This comment is a sub comment, parent_id:' + parent_id); parent_id = ''; //console.log(data); }

This is the end of code analysis!
This part of the code has been built into the handhome theme, and has been optimized Appearance settings - advanced settings It can be enabled in.

Code download

I wrote the relevant code into a file ajax_comment.min.js

The required partners download the code directly. Because the comment structure of each topic is different, they need to modify it before use.

Last modification: February 24, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.