JavaScript框架：优雅地从数据库获取数据 (框架 js从数据库获取数据库数据库数据库)
在网站开发中，获取数据并展示给用户是非常重要的一步。而如果一个网站需要从数据库中获取数据，JavaScript的框架就至关重要。虽然现在有很多种框架，但是在本篇文章中，我们会介绍两个更流行的框架——jQuery和Angular——以及如何用它们优雅地从数据库中获取数据。
jQuery是更流行的JavaScript框架之一，拥有非常强大而简洁的API。当一些用来优化性能的Ajax调用函数被添加到jQuery中后，jQuery又变得更加强大。
我们来看如何使用jQuery从数据库中获取数据。我们需要创建一个HTML页面，添加jQuery和一个div元素。我们会在这个div元素中展示从数据库中获取到的数据。
“`html
“`
这里，我们使用了一个style.css文件来添加一些样式。我们也添加了jQuery和一个名为script.js的JavaScript文件。接下来，我们会写这个script.js文件。
“`javascript
$(document).ready(function() {
$.ajax({
url: “get_data.php”,
type: “POST”,
data: {},
success: function(data) {
$(“#data”).html(data);
}
});
});
“`
这里，我们首先使用$(document).ready()方法，保证代码只有在文档已经加载完毕的时候才会被执行。然后，我们使用$.ajax()方法从get_data.php文件中获取数据。这个文件会在下面的例子中编写。在这个方法中，我们使用了url属性来指定get_data.php文件的地址，并且使用了type属性来指定请求类型为POST。通过data属性，我们可以向get_data.php文件发送一些数据。在本例中，我们没有传递任何参数。在jQuery版的AJAX中，可以使用success回调函数来处理在get_data.php文件被服务器处理后得到的结果。在我们的例子中，服务器端PHP脚本将返回数据并生成HTML字符串。我们使用jQuery的$(“#data”).html(data)方法在网页的指定区域展示数据。
现在，我们来看看服务器端的get_data.php文件是如何被创建的。
“`php
// 与数据库连接，$conn是MySQL连接句柄
$conn = mysqli_connect(“localhost”, “username”, “password”, “database_name”);
// 查询语句
$sql = “SELECT * FROM table_name WHERE column_name LIKE ‘%keyword%'”;
// 查询并打印HTML字符串
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result)) {
echo “
“.$row[‘column_name’].”
“;
}
// 断开连接
mysqli_close($conn);
?>
“`
在这里，我们首先使用mysqli_connect()函数与MySQL数据库建立连接。然后，我们使用SELECT语句来选择我们想获取的数据。在这里，我们使用了LIKE运算符来匹配一个特定的关键字。接下来，我们在一个while循环中打印每个被选中的数据行的相应列的值。我们关闭MySQL连接。
那么，我们怎么使用jQuery从服务器端获取数据呢？我们通过先创建一个PHP文件来处理查询，并将结果作为响应返回给jQuery，然后在JavaScript中解析结果。
“`javascript
$(document).ready(function() {
$.ajax({
url: “get_data.php”,
type: “POST”,
data: { keyword: “search_keyword” },
success: function(data) {
$(“#data”).html(data);
}
});
});
“`
在这里，我们已经将一个名为keyword的变量设置为search_keyword，然后在data属性中传递给服务器端get_data.php文件。我们接下来需要在get_data.php文件中添加一个语句，用于接收该变量的值，并将其用于查询条件。
“`php
// 获取查询变量
$keyword = $_POST[‘keyword’];
// 与数据库连接，$conn是MySQL连接句柄
$conn = mysqli_connect(“localhost”, “username”, “password”, “database_name”);
// 查询语句
$sql = “SELECT * FROM table_name WHERE column_name LIKE ‘%”.$keyword.”%'”;
// 查询并打印HTML字符串
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result)) {
echo “
“.$row[‘column_name’].”
“;
}
// 断开连接
mysqli_close($conn);
?>
“`
在这里，我们使用了$_POST[‘keyword’]数组变量来接收上面所述的变量。接下来，在查询语句中，我们使用该变量作为条件查询关键词。通过这种方法，我们可以根据输入的查询词来检索数据库的内容，并返回匹配的结果。
接下来我们会介绍另一个流行的框架——Angular。Angular是一个由Google维护的开源框架，用于构建单页应用程序（SPA）。它能够简化JavaScript代码，并提供了模板、模型-视图-控制器（MVC）架构、依赖注入等功能。
我们需要创建一个HTML页面，如下所示：
“`html
-
{{data.column_name}}
“`
这里，我们使用了Angular的ng-app和ng-controller指令来指定应用程序的控制器。我们通过ng-repeat指令来循环遍历我们从数据库中获取到的数据，然后通过双大括号分隔符（{{}}）来展示其值。
现在，我们来看一下我们如何使用Angular获取数据。
“`javascript
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope, $http) {
$http.get(“get_data.php”).then(function (response) {
$scope.datas = response.data.records;
});
});
“`
在这里，我们首先使用Angular成员函数module()创建了一个新的应用程序，然后在其中创建了一个控制器。我们通过$http服务从get_data.php文件中获取数据，然后使用.then方法来处理结果。在这里，我们定义了$scope.datas变量，该变量包含我们从get_data.php文件中获取的记录。
那么，我们怎么从客户端发送数据到服务器端呢？我们需要在Angular控制器中使用$http服务的post()函数来向服务器发送数据。
“`javascript
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope, $http) {
$scope.search = function() {
$http.post(“get_data.php”, { keyword: $scope.keyword }).then(function (response) {
$scope.datas = response.data.records;
});
};
});
“`
在这里，我们添加了一个新的函数search()，并在其中添加了一个$http.post()方法。该方法会通过POST方法向get_data.php文件发送一个关键字变量keyword。相较于jQuery，Angular更为简洁和方便。
我们还得转而在后台使用PHP来接收和处理数据。在处理POST请求数据时，可以使用相同的基本结构，像下面这样。
“`php
// 获取查询变量
$keyword = $_POST[‘keyword’];
// 与数据库连接，$conn是MySQL连接句柄
$conn = mysqli_connect(“localhost”, “username”, “password”, “database_name”);
// 查询语句
$sql = “SELECT * FROM table_name WHERE column_name LIKE ‘%”.$keyword.”%'”;
// 查询并返回数据
$result = mysqli_query($conn, $sql);
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
// 断开连接
mysqli_close($conn);
// 返回ON数据
echo json_encode([“records”=>$rows]);
?>
“`
在这里，我们先使用$_POST[‘keyword’]数组变量接收传递过来的关键字变量。然后，我们使用该变量作为关键词进行查询。我们从查询结果中找到满足条件的结果，并把结果存在$rows数组中。我们将数据转换成ON格式，使用json_encode()函数在页面上展示结果。
结论
当我们使用JavaScript框架从数据库获取数据时，jQuery和Angular是两个最广泛使用的框架。尽管它们都可以完成任务，但Angular的设计更加简单易用。无论如何，当需要获取或更新数据时，从客户端发送数据到服务器端并可以完美地成为实现任务的基础。当您在使用这些框架时，请记住让代码看起来简洁而优雅。
