Ajax click to continuously load the data list (graphic tutorial)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

亚连

May 23, 2018 pm 04:07 PM

ajaxloaddata

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.

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software