📌  相关文章
📜  从 db 获取结果并放入 javascript 数组 codeigniter - Javascript (1)

📅  最后修改于: 2023-12-03 15:36:13.167000             🧑  作者: Mango

从数据库获取结果并放入JavaScript数组（CodeIgniter - JavaScript）

在Web开发中，经常需要从数据库中获取数据并将其在前端页面中渲染，JavaScript数组是一种非常方便的数据结构，通常用于存储和处理数据。本文将介绍如何使用CodeIgniter框架从数据库中获取结果并将其放入JavaScript数组中。

环境准备

在本文中，我们使用以下工具和技术：

  • CodeIgniter框架
  • MySQL数据库
  • PHP
  • HTML/CSS/JavaScript

确保在您的本地计算机上安装了以上软件和工具。如果您未安装，可以访问以下网站了解安装方法：

  • CodeIgniter框架：https://codeigniter.com/
  • MySQL数据库：https://dev.mysql.com/
  • PHP：https://www.php.net/
  • HTML/CSS/JavaScript：https://www.w3schools.com/
建立数据库和表

在开始本文之前，请确保您已经建立了一个MySQL数据库，并在其中创建了一个表。具体步骤如下：

  1. 打开MySQL控制台或使用一个图形化界面工具，例如phpMyAdmin。
  2. 创建一个数据库（假设数据库名为“test_db”）：
CREATE DATABASE test_db;
  1. 选择这个数据库：
USE test_db;
  1. 创建一个名为“users”的表，该表有3个字段（id、name、email）：
CREATE TABLE users (
    id INT(11) NOT NULL AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    PRIMARY KEY (id)
);
  1. 向该表中插入一些数据：
INSERT INTO users (name, email) VALUES ('John Doe', 'john.doe@example.com');
INSERT INTO users (name, email) VALUES ('Jane Smith', 'jane.smith@example.com');
INSERT INTO users (name, email) VALUES ('Bob Brown', 'bob.brown@example.com');
CodeIgniter配置

在CodeIgniter中连接和操作数据库需要进行一些配置。在这里，我们将假设您已经设置了config/database.php文件并配置了数据库连接参数。如果没有，请参考以下示例，并将其添加到文件中：

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

/*
|--------------------------------------------------------------------------
| Database
|--------------------------------------------------------------------------
|
| This file will contain the settings needed to access your database.
|
| For complete instructions please consult the 'Database Connection' page
| of the User Guide.
|
| https://codeigniter.com/user_guide/database/configuration.html
|
*/

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'test_db',
	'dbdriver' => 'mysqli',
	'port' => 3306,
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

请根据您的数据库连接参数进行修改。

创建控制器和视图
  1. 创建一个控制器（假设控制器名为“Users”）：
<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Users extends CI_Controller {

    public function index()
    {
        // TODO: fetch data from database and pass it to view
    }
}
  1. 创建一个视图（假设视图名为“users_view”）：
<!DOCTYPE html>
<html>
<head>
	<title>Users</title>
</head>
<body>
	<h1>Users List</h1>

	<script type="text/javascript">
		var users = []; // TODO: fill this array with data obtained from controller
		console.table(users); // print array elements to console
	</script>

</body>
</html>
从数据库中获取数据

在控制器中，我们需要从数据库中获取数据并将其传递给视图。CodeIgniter框架提供了一个非常方便的数据库类，我们可以使用它来执行查询并获取结果。以下是一个示例代码，用于从“users”表中获取所有用户数据：

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Users extends CI_Controller {

    public function index()
    {
        // load database library
        $this->load->database();

        // fetch data from database
        $query = $this->db->get('users');
        $data = $query->result_array();

        // pass data to view
        $this->load->view('users_view', array('users' => $data));
    }
}

在上面的代码中，我们使用了$this->db->get('users')函数来获取“users”表中的所有数据。该函数将返回一个CI_DB_query_builder_result对象，我们可以使用result_array()方法将其转换为一个数组。最后，我们将数据作为参数传递给users_view视图。

填充JavaScript数组

在视图中，我们创建了一个名为users的JavaScript数组。我们需要填充它，以便它可以被用于前端页面的其他操作。以下是一个示例代码，用于填充JavaScript数组：

<!DOCTYPE html>
<html>
<head>
	<title>Users</title>
</head>
<body>
	<h1>Users List</h1>

	<script type="text/javascript">
		var users = <?php echo json_encode($users); ?>;

		console.table(users); // print array elements to console
	</script>

</body>
</html>

在上面的代码中，我们使用了json_encode()函数将PHP变量（即从控制器中传递的数据）转换为JSON字符串，并将其作为JavaScript数组初始化的值。现在，JavaScript数组可以在前端页面中使用了。

总结

在本文中，我们介绍了如何使用CodeIgniter框架从数据库中获取数据并将其传递给JavaScript数组。我们学习了如何使用控制器和视图，以及如何使用CodeIgniter提供的数据库类来执行数据库查询。最后，我们填充了JavaScript数组，并将其用于前端页面。希望这篇文章能帮助你在Web开发中的工作中更加方便。