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

Source: Internet
Author: User
Tags comments

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.


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}
<P class = "ov"> <em >{$ comment. username} </em> </p>
<P class = "f14 & Prime; >{$ comment. content} </p>
{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}"/>
<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
/* 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.