用PHP在Select2中从PostgreSQL加载数据的详细教程

DebugUsery
124 阅读1分钟

Select2 jQuery插件，使HTML选择元素更加人性化。

它允许使用或不使用AJAX加载数据。

在本教程中，我展示了如何使用jQuery AJAX和PHP从PostgreSQL数据库中动态加载数据的选择2。

Loading data from PostgreSQL in Select2 with PHP

下载

内容

  1. 表的结构
  2. 配置
  3. 下载并包含
  4. HTML
  5. 脚本
  6. jQuery
  7. 输出
  8. 结论

1.表 的结构

我在这个例子中使用了users 表。它有以下的结构 -

CREATE TABLE users (
     id serial PRIMARY KEY,
     username varchar(80) NOT NULL,
     fullname varchar(80) NOT NULL,
     email varchar(80) NOT NULL
)

2.配 置

为数据库配置创建一个config.php 。

完成的代码

<?php

$host = "localhost";
$user = "postgres";
$password = "root";
$dbname = "tutorial";
$con = pg_connect("host=$host dbname=$dbname user=$user password=$password");

if (!$con) {
   die('Connection failed.');
}

3.下 载和包含

  • 从这里下载库。
  • 将select2.min.css 和select2.min.js 文件与jQuery库一起纳入。你也可以使用CDN -
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

4.H TML

创建<select id='selUser'> 元素。

完成的代码

<select id='selUser' style='width: 200px;'>
     <option value='0'>- Search user -</option>
</select>

5.脚 本

创建ajaxfile.php 文件。

检查searchTerm 是否是POST。如果不是POST，则从users 表中获取所有记录，否则从users 表中获取记录，其中$search 是在fullname 字段中找到。

将获取的记录分配到$result 。

在获取的记录上循环，用id 和text 键初始化$data 数组。在id 键中传递$id ，在text 键中传递$fullname 。

以JSON格式返回$data 数组。

完成的代码

<?php
include 'config.php';

$result = array();
if(!isset($_POST['searchTerm'])){ 
      $sql = "select * from users order by fullname";
      $result = pg_query($con, $sql);
}else{ 
      $search = $_POST['searchTerm']; 
 
      $sql = "select * from users where fullname ilike $1";
      $result = pg_query_params($con, $sql, array('%'.$search.'%'));
}

$data = array();

while ($row = pg_fetch_assoc($result) ){

      $id = $row['id'];
      $fullname = $row['fullname'];

      $data[] = array(
           "id" => $id, 
           "text" => $fullname
      );

}

echo json_encode($data);
die;

6. jQuery

在#selUser 上定义select2。

使用ajax 选项发送AJAX请求。设置其url: 'ajaxfile.php' ，type: 'post' ，dataType: 'json' ，将输入的值作为数据传递。

使用processResults 来处理成功的回调。

完成代码

$(document).ready(function(){

      $("#selUser").select2({
            ajax: { 
                  url: "ajaxfile.php",
                  type: "post",
                  dataType: 'json',
                  delay: 250,
                  data: function (params) {
                       return {
                            searchTerm: params.term // search term
                       };
                  },
                  processResults: function (response) {
                       return {
                            results: response
                       };
                  },
                  cache: true
            }
      });
});

7.输 出

查看输出

8.总 结

从AJAX返回的响应必须有id 和text 键，否则，数据就不能正常加载。

如果你有太多的记录，那么你可以在SQL查询中使用LIMIT来获取一次有限的记录数量。

avatar
文章
阅读
粉丝