结合AJAX进行PHP开发之入门(二)
导航的实现
虽然表格列出了目录中的一些图像,但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行,则需要一套标准的链接:首页、上一页、下一页和尾页。
清单 3. 分页器导航
// Append navigation
$output = '
Showing items ' . $limit_start . '-' .
min($limit_start $limit_step - 1, count($images)) .
' of ' . count($images) . '
';
$prev_start = max(0, $limit_start - $limit_step);
if ( $limit_start > 0 ) {
$output .= get_table_link('
$output .= ' | ' . get_table_link('Prev',
$prev_start, $limit_step);
} else {
$output .= '
}
// Append next button
$next_start = min($limit_start $limit_step, count($images));
if ( $limit_start $limit_step
$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);
$output .= ' | ' . get_table_link('>>',(count($images) - $limit_step), $limit_step);
} else {
$output .= ' | Next | >>';
}
$output .= '
';最后还要编写 get_image_link() 和 get_table_link() 函数,让用户将缩略图展开成完整的图像(参见清单 4)。注重,脚本 index.php(以及后面要创建的 expand.php)只在这两个函数中调用。这样就很轻易改变链接的功能。事实上在下面与 Sajax 进行集成时,只有这两个函数需要修改。
清单 4. get_image_link、get_table_link 实现
function get_table_link ( $title, $start, $step ) {
$link = "index.php?start=$start&step=$step";
return '' . $title .'';
}
function get_image_link ( $title, $index ) {
$link = "expand.php?index=$index";
return '' . $title . '';
}
放大图片
现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是答应用户单击缩略图来查看全图。get_image_link() 函数调用了 expand.php 脚本,我们现在就来编写它。该脚本传递用户希望展开的文件的索引,因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了,只需创建病输出 image 标记即可。
清单 5. get_image 函数
function get_image ( $index ) {
$images = get_image_list ( 'images' );
// Generate navigation
$output .= '
return $output;
}

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

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Solution to docker start failure: 1. Check the running status, and then release the occupied memory through the "echo 3 > /proc/sys/vm/drop_caches" command; 2. Use "$netstat -nltp|grep .. ." command to check whether the port has been occupied. If it is found to be occupied after going online, change it to an available port and restart.

"Detailed explanation of how to use take and limit in Laravel" In Laravel, take and limit are two commonly used methods, used to limit the number of records returned in database queries. Although their functions are similar, there are some subtle differences in specific usage scenarios. This article will analyze the usage of these two methods in detail and provide specific code examples. 1. Take method In Laravel, the take method is used to limit the number of records returned, usually combined with the orderBy method.

The STEP file format is an important 3D model data exchange format. It plays an important role in CAD, CAM and other related fields. Its standardization and widespread application help improve work efficiency, reduce the complexity of data conversion, and Promote interoperability between different systems. The full name is "Standard Terminal Equipment Protocol", which is three-dimensional image data based on the text-encoded exchange structure of the ASCII format that complies with the STEP application protocol ISO 10303-21 standard.

Take and limit are two commonly used methods in Laravel to limit the number of query result sets. Although they have certain similarities in functionality, they differ in usage and some details. This article will conduct a detailed comparison of the functions and usage of the two methods, and provide specific code examples to help readers better understand the differences between them and how to apply them correctly. 1.take method The take method is in the LaravelEloquent query builder

Front-end output configuration requires specific code examples. In front-end development, output configuration is a very important configuration. It is used to define the file path, file name and related resource paths generated after the project is packaged. This article will introduce the role of front-end output configuration, common configuration options, and give specific code examples. The role of output configuration: The output configuration item is used to specify the file path and file name generated after the project is packaged. It determines the final output of the project. Packaged in webpack etc.

In-depth analysis: What is the difference between link and import? When developing web pages or applications, we often need to introduce external CSS files or JavaScript libraries to enhance or customize our code. In this process, link and import are two commonly used methods. Although their purpose is to introduce external resources, there are some differences in specific usage. Syntax and location: link: Use the link tag to link external resources into the HTML file, usually located at the head of the HTML document

Solution to node start error: 1. Execute "node xx.js" directly in the terminal; 2. Add start startup item "scripts": {"test": "echo \"Error: no test specified\" && exit 1 ","start":"node service.js"}"; 3. Re-execute "npm start".

The differences between link tags and import include syntax and usage, functions and features, loading timing, compatibility and support, etc. Detailed introduction: 1. Syntax and usage. The link tag is an HTML tag, used to introduce external resources into HTML documents, such as CSS style sheets, JavaScript scripts, icons, etc. import is the module import syntax in ES6, used in JavaScript files. Introduce external modules; 2. Functions and features. The link tag can introduce a variety of resources, such as CSS style sheets, icons, etc.
