Ajax Click on constantly load data list _ajax related

Introduction to Ajax

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

To achieve each of the functions have a variety of methods and ideas, today summed up a small load of my function.

Loading is very common, every cell phone control is more familiar to her. Every time we're brushing up on Weibo, friends circle, space, etc., slide to a certain amount, will be reminded to load more on the slide, this is a loading method; There is another one is to click Load, click Load a certain amount, then click, then load a certain amount (said a lot of nonsense).

Now let's say Ajax loads data one by one, like this list of data.

Show 10 First, then click Load More, then show 10

First, train of thought

The general use of Ajax load, a moment will load all the data, this time to control the load, it will be used to judge, judge loaded to 10 to stop loading, the back by clicking the button, after the loading of the 10 after continue to load.

To control how to load only 10 how to do pinch. Can not be traversed by the I to Judge 10, because the load after 10 after loading, so that the next 10 is not good to judge, so you need to define a new variable to calculate the number of loads,

You can write this:

var ci = 0;
for (var i = 0; i < data.list.length; i++) {
ci++; 
if (ci>) {break
;
}
}

Then you need to load 10 more, then call this method, so this method needs to declare a function name, the next time you need to use the call, if you need to pass the argument. Now there is a problem, the first time in the load after 10, you need to load the first 10 data followed by the JSON data, how to do???

It doesn't matter, you can call the function defined above, and then pass the argument. How to calculate the parameters???

First think of a parameter and what has a relationship, and I have a relationship, I and what is related to it? Or what can affect me?

It seems that only its value will affect (that is not nonsense), so its value can not be a constant number, can only be a variable, then where does the variable come from???

Don't forget that we also have a click event that first defines a click-times variable var clicknum = 0, because each time 10 is loaded, the value of I should be:

i = 10*clicknum, which is the index value of the first data that is loaded each time. So that we can solve the problem above.

At this time there are problems to solve, when the data are all clicked after loading, click the button need to hide, then how to calculate the data loaded???

We can calculate by the number of clicks Clicknum, because each load 10, so can calculate the total need to load the number of parseint ((data.list.length)/10) +1, why load the number of times to add 1?

Because parseint () is to take the whole, such as 21/10=2, but the actual need to load 3 times, so to add 1, coincidentally is our first load do not click, the browser has been loaded in to read 10 data,

So clicknum = parseint ((data.list.length)/10), hide the click button when clicknum = = parseint ((data.list.length)/10).

The idea is basically clear.

Second, realize the function

Html:

<DL id= "Incomenum" >
<dt><em></em> daily distribution Benefits </dt>
</dl>
<div class = "Jiazai_more" > Click to view More </div>

Css:

CSS is omitted here.

Js:

function Nwalletprofit (num, cnum) {$.ajax ({type: "Post", Async:true, Url:url, DataType: "JSON", Success:function (Dat A) {if (Data.list.length > 0) {var i = num; var ci= 0; var x = parseint ((data.profit_list.length)/10);//x is the number of groups per 10 group if (Cnum >= x)
{$ ('. Jiazai_more '). Hide ();////////////////////////when clicked more times ≥ group number, hidden button for (; i < data.profit_list.length; i++) {var htmltxt = ""; 
ci++;
var date = Data.profit_list[i].date;
var year = date.substring (0, 4);
var month = date.substring (4, 6);
var day = date.substring (6);
Date = year+ ' year ' +month+ ' month ' +day+ ' Day ';
Htmltxt + = ' <dd> ';
Htmltxt + = ' 
 

The above is a small series to introduce the Ajax click on the list of constantly loaded data, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!