Ajax click to continuously load the data list (graphic tutorial)

This article mainly introduces the relevant information about Ajax clicking to continuously load the data list. Friends who need it can refer to it

Introduction to Ajax

AJAX stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

There are various methods and ideas to implement each function. Today I will summarize a small loading function of mine.

Loading is very common, and every mobile phone user is very familiar with her. Every time we scroll through Weibo, Moments, Space... and slide to a certain amount, we will be reminded to slide up to load more. This is one way of loading; the other is to click to load, click to load A certain amount, then click, and then load a certain amount (a lot of nonsense).

Now let’s talk about ajax loading data one by one, similar to this data list.

First display 10, then click to load more, then display 10 more...

##1. Idea

Generally, if you use ajax to load, all the data will be loaded at once. This time, the amount of loading must be controlled. Then you need to use judgment to stop loading when 10 items are loaded, and then click the button to continue loading after the next 10 items are loaded.

What should I do if I want to control only 10 loads. You cannot judge 10 by traversing i, because after loading 10, you have to load later, so it is difficult to judge the next 10, so you need to define a new variable to calculate the number of loaded,

can be written like this:

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

Then you need to load 10 more and then call this method, so this method needs to declare one Function name, call it next time you need it. You can also pass parameters if you need to. Now there is another question. After loading 10 data for the first time, I need to load the first 10 data and then the following json data. What should I do? ? ?

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

First think about what a parameter is related to, and it is related to i. What is i related to? Or what can affect i?

It seems that only its value will be affected (isn’t that nonsense), in this case its value cannot be an unchanged number, but can only be a variable, so where does the variable come from? Woolen cloth? ? ?

Don’t forget that we also have a click event. First define a variable for the number of clicks var clickNum = 0, because there are 10 for each load, so the value of i should be:

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

There are still problems to be solved at this time. When all the data is clicked to load, the clicked button needs to be hidden. So how to calculate that the data is loaded? ? ?

We can calculate it by the number of clicks clickNum, because 10 are loaded each time, so we can calculate the total number of times that need to be loaded parseInt((data.list.length)/10) 1, why Do I need to add 1 to the number of loads?

Because parseInt() is rounded, such as 21/10=2, but it actually needs to be loaded 3 times, so 1 must be added. Coincidentally, we don’t need to click on the first load, the browser has After loading, 10 pieces of data are read,

So clickNum = parseInt((data.list.length)/10), when clickNum == parseInt((data.list.length)/10 ) to hide the click button.

The idea is basically clear

2. Implement the function

HTML:

<dl id="incomeNum">
　　<dt><em></em>每日分配收益</dt>
</dl>
<p class="jiaZai_more">点击查看更多</p>

css:

Omit css 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为每10个一组的组数
if(cNum >= x){
$(".jiaZai_more").hide(); //当点击更多的次数 ≥ 组数时，隐藏按钮
}
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+&#39;年&#39;+month+&#39;月&#39;+day+&#39;日&#39;;
htmltxt += &#39;<dd>&#39;;
htmltxt += &#39;<h5 id="date">&#39;+date+&#39;</h5>&#39;;
htmltxt += &#39;<p class="income">&#39;+data.list[i].profit+&#39;%</p>&#39;;
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on(&#39;click&#39;, function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

The above is what I compiled for everyone, I hope that it will be better in the future Helpful to everyone.

Related articles:

Simple implementation of Ajax uploading pictures and previewing

Summary of techniques for file upload based on ajax html

Simple application based on Ajax form submission and background processing

# #

The above is the detailed content of Ajax click to continuously load the data list (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!