Jquery's getjson implementation page does not refresh and load the remaining data method events

With the guidance of this article "insert a div into a specified div using JS, the following describes how to use JavaScript to load the remaining data without refreshing.

Case scenario:

On a comment page, only 10 pieces of data are displayed. I want to use js + ajax to obtain the data. The refreshing page asynchronously loads and displays the next 10 pieces of data, and then triggers and displays 10 pieces of data, until all are displayed completely.

Steps:

1. Obtain the next 10 Comment data strings.
2. Assign the value of the data to the end of the original 10 comments.
3. Update the remaining comments display and hide the icon if the remaining number is less than 0.
Complete HTML code: (the background code of the program is self-processed as needed)
/*
At the beginning, let's talk about the meanings of the corresponding parameters in the code. Different program situations will show different, and the principle is the same:
$ Comment_data: the first 10 Comment data items are displayed in a loop. The specific parameters in the comment do not matter.
{$ Comment_num} remaining comments
*/
<Div id = "comments">
<Ul id = "c1 & Prime; class =" comment ">
{Foreach from = $ comment_data item = comment}
<Li>
<P class = "ov"> <em >{$ comment. username} </em> </p>
<P class = "f14 & Prime; >{$ comment. content} </p>
</Li>
{/Foreach}
</Ul>
{If $ comment_num> 0} <div> <a href = "javascript: void (0);" id = "ajax" class = "ajc b4 mt10 & Prime;> click to load more <span id = "c_num" >{$ comment_num} </span> comments </a> </div >{/ if}
<Input type = "hidden" id = "ajax_num" value = "1 & Prime;/>
<Input type = "hidden" id = "comment_num" value = "{$ comment_num}"/>
</Div>
<Script type = "text/javascript">
Ajax. onclick = function (){
InsertEle (); // Click to load more trigger events
}
Function insertEle (){
Var oTest = document. getElementById ("comments"); // obtain the id of the comment peripheral div
Var ajax_num = document. getElementById ("ajax_num"). value; // Obtain the comment data displayed on the current page.
Var ajax_ I = parseInt (ajax_num) + 1; // value assigned to the next page of the comment. Adding 1 for the first time indicates obtaining the second page of data
Var comment_num = document. getElementById ("comment_num"). value; // gets the number of remaining comments
Var comment_ I = parseInt (comment_num)-10; // The number of comments left after the value is assigned.
If (comment_num <0 ){
Document. getElementById ('Ajax '). style. display = "none"; // if the remaining comments are 0, directly hide and return
Return;
}
/* Create a new ul element in the following three rows */
Var newNode = document. createElement ("ul ");
NewNode. id = "c" + ajax_ I;
NewNode. className = "comment ";
/* The following is the ajax processing method for obtaining the next 10 Comment data. Refer to the code and decide based on your program. Note that the data is assembled into a <li> string */
$. GetJSON ("comment. php? Act = ajax & g_id = "+ {$ goods_id} +" & page = "+ ajax_ I,
Function (data ){
If (data. error = 0 ){
NewNode. innerHTML = data. content; // The final string data.
} Else {
Alert ("No comment !")
}
})
Var reforeNode = document. getElementById ("c" + ajax_num );
OTest. insertBefore (newNode, reforeNode. nextSibling); // add the created element to the end of c_1.
If (comment_ I <= 0 ){
Document. getElementById ('Ajax '). style. display = "none"; // hide the button if the remaining comments are less than 0 after data is loaded.
}
Document. getElementById ("ajax_num"). value = ajax_ I; // update the page number
Document. getElementById ("comment_num"). value = comment_ I; // update the number of comments.
Document. getElementById ("c_num"). innerHTML = comment_ I; // update the number of comments to display
}
</Script>