Ajax click to continuously load the data list, ajax click to load

Ajax click to continuously load the data list, ajax click to load

Ajax Introduction

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

AJAX is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

There are various methods and ideas for implementing each function. Today I will summarize one of my small loading functions.

Loading is very common, and every mobile phone controller is no longer familiar with her. Every time we slide through Weibo, our moments, and space to a certain amount, we will remind you to slide and load more. This is a loading method; another way is to click load, load a certain amount of clicks, and then load a certain amount (a lot of nonsense ).

Now let's talk about ajax loading data one by one, similar to such a data list.

First, 10 are displayed, then click "load more", and then 10 are displayed ·····

I. Ideas

If ajax is used for loading, all the data will be loaded. to load the control amount this time, you need to use judgment to determine that the loading will be stopped by 10. click the button next to it, continue to load the 10 logs that are loaded.

To control the loading of only 10 items, click "OK. 10 variables cannot be identified by traversing I, because the next 10 variables will be loaded after the first 10 are loaded, so the next 10 variables are hard to judge. Therefore, a new variable needs to be defined, to calculate the number of loads,

You can write as follows:

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

Then we need to load 10 more and then call this method. Therefore, we need to declare a function name for this method and call it the next time we need to use it. If we need to pass the parameter, we can also. Now there is another question: After loading 10 data records for the first time, we need to load the first 10 data records and then the subsequent json data. What should we do ???

It doesn't matter. You can call the previously defined function and then pass the parameter. How can we calculate parameters ???

First, think about the relationship between a parameter and I. What is the relationship between I and? Or what can affect I?

It seems that only its value will affect (isn't it nonsense), so its value cannot be a constant number, but only one variable, where do variables come from ???

Don't forget that we have another click event. First, we define the variable var clickNum = 0 for the number of clicks. Because there are 10 clicks each time, the I value should be:

I = 10 * clickNum, which is the index value of the first data loaded each time. In this way, the above problem is solved.

There is still a problem to solve. When all the data is loaded, click the button to hide it. How can we load the computing data ???

We can calculate the number of clicks by clickNum. Because 10 clicks are loaded each time, we can calculate the total number of times parseInt (data. list. length)/10) + 1. Why should I add 1 to the number of loads?

Because parseInt () is an integer, such as 21/10 = 2, but it needs to be loaded three times, so we need to add 1. Unfortunately, we do not need to click for the first loading, the browser has loaded 10 pieces of data,

Therefore, clickNum = parseInt (data. list. length)/10) hides the click button when clickNum = parseInt (data. list. length)/10.

The idea is basically clear

Ii. Functions

HTML:

<Dl id = "incomeNum"> <dt> <em> </em> daily revenue distribution </dt> </dl> <div class = "jiaZai_more"> click to view more multiple </div>

Css:

Css is omitted here.

Js:

Function nwalletProfit (num, cNum) {$. ajax ({type: "post", async: true, url: url, dataType: "json", success: function (data) {if (data. list. length> 0) {var I = num; var ci = 0; var x = parseInt (data. profit_list.length)/10); // x indicates the number of groups in each 10 groups. if (cNum> = x) {$ (". jiaZai_more "). hide (); // hide the button when you click more than or equal to the number of groups} 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 section describes how to load the data list by clicking Ajax. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!