How to achieve Ajax without disconnecting the data loading list when clicking

This time I will show you how Ajax can achieve non-stop data loading list when clicked. What are the precautions for Ajax to achieve non-stop data loading list when clicked. The following is a practical case, let's take a look. .

Introduction to Ajax

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML) 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, a data list like this.

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

1. Idea

Generally, if you use ajax to load, all the data will be loaded at once. This time, if you want to control the amount of loading, you need to use judgment to judge the loading. Stop loading after reaching 10 items, 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,

You can write 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 a function name and call it when you need to use it next time. 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, what is it 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? ? ?

Don’t forget that we also have a click event. First define a variable var clickNum = 0 for the number of clicks. Because there are 10 each time it is loaded, 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 is it loaded? How about adding 1 to the number of times?

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 loaded it. 10 pieces of data are read,

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

The idea is basically clear

二、实现功能

HTML：

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

css：

此处省略css。

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>';
htmltxt += '<h5 class="date">'+date+'</h5>';
htmltxt += '<p class="income">'+data.list[i].profit+'%</p>';
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on('click', function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax怎么实现智能提示关联词搜索

jQuery.ajaxWebService请求WebMethod处理Ajax

The above is the detailed content of How to achieve Ajax without disconnecting the data loading list when clicking. For more information, please follow other related articles on the PHP Chinese website!