在CodeIgniter 4中使用AJAX在页面滚动中加载内容

DebugUsery
110 阅读3分钟

无限滚动是一种分页方式，在用户滚动页面时自动加载数据。

MySQL数据库的数据是使用AJAX加载的。

这个过程将一直持续到所有数据都没有显示为止。

在本教程中，我展示了如何在CodeIgniter 4中使用jQuery AJAX在页面滚动中加载内容。

Load content on page scroll using AJAX in CodeIgniter 4

演示 下载

内容

  1. 数据库配置
  2. 启用CSRF
  3. 创建表
  4. 模型
  5. 航线
  6. 控制器
  7. 查看
  8. 运行
  9. 演示
  10. 结语

1.数 据库配置

  • 打开.env ，该文件可在项目根部找到。

**注意 -**如果开始时没有加点（.），则将文件重命名为.env。

  • 从database.default.hostname,database.default.database,database.default.username,database.default.password, 和database.default.DBDriver 的开头删除#。
  • 更新配置并保存它。
database.default.hostname = 127.0.0.1
database.default.database = testdb
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

2.启 用CSRF

  • 再次打开.env 文件。
  • 从security.tokenName,security.headerName,security.cookieName,security.expires,和security.regenerate 的开头删除#。
  • 我将security.tokenName 的值更新为'csrf_hash_name' 。用这个名字读取CSRF哈希值。你可以用任何其他值来更新它。
  • 如果你不想在每个AJAX请求后重新生成CSRF哈希值，那么就设置security.regenerate = false 。
security.tokenName = 'csrf_hash_name' 
security.headerName = 'X-CSRF-TOKEN' 
security.cookieName = 'csrf_cookie_name' 
security.expires = 7200 
security.regenerate = true
  • 打开app/Config/Filters.php 文件。
  • 如果有注释的话，在'before' 中取消注释'csrf' 。
// Always applied before every request
public $globals = [
    'before' => [
       //'honeypot'
       'csrf',
    ],
    'after' => [
       'toolbar',
       //'honeypot'
    ],
];

3.创 建表

  • 使用迁移创建一个新的表posts 。
php spark migrate:create create_posts_table
  • 现在，从项目根目录导航到app/Database/Migrations/ 文件夹。
  • 找到一个以create_posts_table 结尾的PHP文件并打开它。
  • 在up() 方法中定义表的结构。
  • 使用down() 方法删除posts 表，该表在撤销迁移时调用。
<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class CreatePostsTable extends Migration
{
    public function up() {
       $this->forge->addField([
             'id' => [
                   'type' => 'INT',
                   'constraint' => 5,
                   'unsigned' => true,
                   'auto_increment' => true,
             ],
             'title' => [
                   'type' => 'VARCHAR',
                   'constraint' => '100',
             ],
             'description' => [
                    'type' => 'TEXT',
                    'null' => true,
             ],
             'link' => [
                    'type' => 'VARCHAR',
                    'constraint' => '255',
             ],
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('posts');
    }

    //--------------------------------------------------------------------

    public function down() {
       $this->forge->dropTable('posts');
    }
}
  • 运行迁移。
php spark migrate

4.模 型

  • 创建Posts 模型。
php spark make:model Posts
  • 打开app/Models/Posts.php 文件。
  • 在$allowedFields 数组中指定字段名 -['title','description','link'] ，可以在插入和更新时设置。

完成的代码

<?php

namespace App\Models;

use CodeIgniter\Model;

class Posts extends Model
{
     protected $DBGroup = 'default';
     protected $table = 'posts';
     protected $primaryKey = 'id';
     protected $useAutoIncrement = true;
     protected $insertID = 0;
     protected $returnType = 'array';
     protected $useSoftDeletes = false;
     protected $protectFields = true;
     protected $allowedFields = ['title','description','link'];

     // Dates
     protected $useTimestamps = false;
     protected $dateFormat = 'datetime';
     protected $createdField = 'created_at';
     protected $updatedField = 'updated_at';
     protected $deletedField = 'deleted_at';

     // Validation
     protected $validationRules = [];
     protected $validationMessages = [];
     protected $skipValidation = false;
     protected $cleanValidationRules = true;

    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert = [];
    protected $afterInsert = [];
    protected $beforeUpdate = [];
    protected $afterUpdate = [];
    protected $beforeFind = [];
    protected $afterFind = [];
    protected $beforeDelete = [];
    protected $afterDelete = [];
}

5.路 线

  • 打开app/Config/Routes.php 文件。
  • 定义2个路由 -
    • / - 加载初始页面内容。
    • **getPosts -**处理页面滚动的AJAX请求。

完成的代码

$routes->get('/', 'PostsController::index');
$routes->post('getPosts', 'PostsController::getPosts');

6.控 制器

  • 创建PostsController 控制器 -
php spark make:controller PostsController
  • 打开app/Controllers/PostsController.php 文件。
  • 导入Posts 模型。
  • 我定义了一个类变量 -
    • **rowperpage -**用于存储一次获取的记录数量。我把它设置为4。根据你的要求调整它的值。
  • 创建2个方法 -
    • **index() -**将$this->rowperpage 赋给$data['rowperpage'] ，将记录总数赋给$data['totalrecords'] ，并从posts 表中获取记录。

加载index 视图并传递给$data 。

    • **getPosts() -**这个方法用来处理页面滚动的AJAX请求。

读取POST值并将其分配给$postData 变量。将$postData['start'] 赋值给$start 。

根据$start 和$this->rowperpage 的值，从posts 表中获取记录。在获取的记录上进行循环，创建HTML布局，并将其分配给$html 变量。

将新的CSRF标记哈希值分配给$data['token'] ，将$html 分配给$data['html'] 。

以JSON格式返回$data 数组。

完成的代码

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Posts;

class PostsController extends BaseController {

     public $rowperpage = 4; // Number of rowsperpage

     public function index() {
           $posts = new Posts();

           // Number of rowsperpage
           $data['rowperpage'] = $this->rowperpage;

           // Total number of records
           $data['totalrecords'] = $posts->select('id')->countAllResults();

           // Fetch 4 records
           $data['posts'] = $posts->select('*') 
                                ->findAll($this->rowperpage, 0);

           return view('index',$data);
     }

     public function getPosts(){ 
            $request = service('request'); 
            $postData = $request->getPost(); 
            $start = $postData['start'];

            // Fetch records
            $posts = new Posts();
            $records = $posts->select('*') 
                         ->findAll($this->rowperpage, $start);

            $html = "";
            foreach($records as $record){
                  $id = $record['id'];
                  $title = $record['title'];
                  $description = $record['description'];
                  $link = $record['link'];

                  $html .= '<div class="card w-75 post">
                       <div class="card-body">
                            <h5 class="card-title">'.$title.'</h5>
                            <p class="card-text">'.$description.'</p>
                            <a href="'.$link.'" target="_blank" class="btn btn-primary">Read More</a>
                       </div>
                  </div>';
            }

            // New CSRF token
            $data['token'] = csrf_hash();

            // Fetch data
            $data['html'] = $html;

            return $this->response->setJSON($data);
     }
}

7.查 看

在app/Views/ 中创建index.php 文件。

我包括Bootstrap CSS，只是为了设计。

创建一个隐藏元素，在name 属性中存储在.env 文件中指定的CSRF令牌名称，在value 属性中存储CSRF哈希。

<input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />

在$posts 循环，并创建布局。我在<div > 上添加了'post' 类，以便在添加新内容时找到最后的内容。

创建了3个隐藏字段

  1. 存储当前行的位置。
  2. 存储一次获取的行数。
  3. 存储记录的总数。

脚本 -

创建2个函数 -

  • **checkWindowSize() -**使用这个函数来检查屏幕是否过大或页面没有足够的内容可以滚动。如果条件为真，则通过调用fetchData() 函数获取新记录。
  • **fetchData() -**使用这个函数获取新的记录。

从隐藏字段获取数值，并将其存储在变量中。将rowperpage 与start 加在一起。如果start 的值是<= allcount ，则更新#start 值。

读取CSRF令牌的名称和哈希值并分配给变量。

发送AJAX POST请求到site_url('getPosts') ，将{[csrfName]: csrfHash,start:start} 作为数据，设置dataType: 'json' 。

在成功的回调中，将新获取的数据response.html 附加在最后一个<div class='post '> 。同时，更新CSRF令牌。

调用checkWindowSize() 函数，再次检查页面是否可滚动。

定义$(window).scroll 事件，使用这个检查，如果滚动位置到达终点，则通过调用fetchData() 函数获取新的记录。

同样地，为手机定义touchmove 事件，使用这个检查，如果滚动位置达到终点，则通过调用fetchData() 函数获取新的记录。

完成的代码

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <title>Load content on page scroll using AJAX in CodeIgniter 4</title>

       <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/

8.运 行

  • 使用命令提示符（如果你在Windows上）或终端（如果你在Mac或Linux上）导航到该项目，然后
  • 执行 "php spark serve "命令。
php spark serve
  • 在网络浏览器中运行http://localhost:8080 。

9.演 示

查看演示

10.总 结

你可以用它来替代传统的分页方式。

在滚动页面时加载新的数据，即使滚动的内容不多，它也能发挥作用。

如果你觉得这个教程有帮助，那么别忘了分享。

相关帖子。

[

如何用jQuery AJAX从MySQL获取记录 - Laravel 8

](makitweb.com/how-to-fetc…

如何以PDF、CSV和Excel格式导出DataTables数据

](makitweb.com/export-data…

如何从WordPress主题发送AJAX请求

](makitweb.com/how-to-send…)

avatar
文章
阅读
粉丝