使用jQuery，JSON和DataTable创建SCRUD系统

最新推荐文章于 2024-09-23 17:27:13 发布

dingshi7798

最新推荐文章于 2024-09-23 17:27:13 发布

阅读量204

点赞数

文章标签： json 数据库 php

本文随附的演示已于2016年4月29日更新，以解决XSS漏洞

每个简单的软件都允许处理通常存储在数据库中的数据。首字母缩略词SCRUD指的是用户处理可用数据所需的基本操作功能：搜索，创建，读取，更新和删除。

在本文中，我们将创建一个Web应用程序，该应用程序使用户能够搜索数据库并完全管理其内容。该系统基于jQuery，JSON和流行的DataTables和jQuery Validation插件。

SCRUD应用程序的界面

我们将使用什么

在本节中，我将简要介绍本教程中将使用的库和插件。

jQuery和Ajax

jQuery是一个免费的开放源代码和跨平台JavaScript库，可简化客户端HTML脚本。 jQuery使选择DOM元素和执行DOM操作操作以及处理事件（例如鼠标单击和键盘输入）变得更加容易。在我看来，jQuery是创建Ajax应用程序的事实上的标准 。

Ajax是一种允许您异步执行HTTP请求的技术。这意味着Web应用程序可以从Web服务器检索数据并将数据发送到Web服务器，而无需完全重新加载网页。

在SitePoint，我们多次讨论了jQuery和Ajax。如果您需要刷新这些主题，可以查看以下文章：

本教程将向您展示如何创建一个SCRUD应用程序，该应用程序执行所有任务而无需重新加载网页（甚至一次）。

JSON格式

为了在应用程序和Web服务器之间进行数据传输，我们将使用JSON格式。 JSON数据格式基于属性-值对，这意味着每个属性都有一个值和一个名称来标识它。

DataTables和jQuery验证插件

jQuery非常适合与插件结合使用，并且易于扩展。在本教程中，我们将使用两个插件。第一个称为DataTables 。它将高级交互控件添加到普通HTML表中，例如分页，搜索功能和列排序。第二个是jQuery Validation ，它使验证表单元素更加容易。

入门

对于我们的示例，我们将在同一文件夹中创建以下文件：

data.php ：将执行数据库任务的PHP脚本
index.html ：我们界面的HTML文件
layout.css ：包含我们Web应用程序样式的CSS文件
webapp.js ：使用jQuery编写的JavaScript文件，用于管理前端操作和事件

您可以从GitHub上的存储库下载所有源代码。除此之外，您还需要一个正常运行的MySQL数据库。

第一个任务是创建一个名为index.html的新HTML5文件，该文件包括：

添加按钮
大部分为空的表（将显示数据库数据）
添加/编辑表单
Noscript消息
消息容器
加载消息容器

在HTML文件的head部分，我们加载jQuery 1.11.2版本。该文件是从Google服务器下载的。如此处所述：

Google托管库服务是许多流行的开源JavaScript库的稳定，可靠，高速且可在全球范围内使用的内容分发网络。

DataTables提供了类似的CDN。我们从其网络加载DataTables版本1.10.0，并从CDN加载jQuery Validation插件版本1.13.1，以开始工作。

出于目的，HTML表在tbody部分中没有内容。我们将使用DataTables jQuery插件插入表数据。由于此页面需要JavaScript才能正常工作，因此我们提供了noscript标记，以通知用户浏览器不支持JavaScript还是禁用了JavaScript。在这种情况下，将显示一个空表，并且“添加公司”按钮不起作用。

这是消息的样子：

错误信息

MySQL数据库

现在是时候创建一个MySQL数据库来存储示例数据了。数据来自此Wikipedia页面，我们有按收入排序的有关最大的IT公司的信息。使用以下查询创建表：

CREATE TABLE `it_companies` (
  `company_id` int(11) unsigned NOT NULL auto_increment,
  `rank` int(11) unsigned NOT NULL,
  `company_name` varchar(255) NOT NULL,
  `industries` varchar(255) NOT NULL,
  `revenue` float(9,2) NOT NULL,
  `fiscal_year` year(4) NOT NULL,
  `employees` int(11) unsigned NOT NULL,
  `market_cap` float(9,2) NOT NULL,
  `headquarters` varchar(255) NOT NULL,
  PRIMARY KEY  (`company_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

创建数据库表后，我们可以插入示例数据。为了使您更轻松地创建数据库表和导入示例数据，可以使用GitHub上提供的名为queries.sql的SQL文件。

PHP脚本处理数据库数据

此时，数据在数据库中可用。因此，我们可以设置PHP脚本，该脚本将从数据库中检索信息并使用JSON数据格式发送它们。为此，我们需要检索PHP脚本已处理的数据（这些数据将由我们自己的jQuery脚本提交），例如获取所有公司或更新特定的公司记录。然后，我们连接到数据库并从中获取所需的数据。请确保在data.php脚本中输入您自己的登录详细信息，以便能够连接到您的MySQL数据库：

// Database details
$db_server   = 'localhost';
$db_username = '***';
$db_password = '***';
$db_name     = '***';

我们使用相同的PHP文件来提供来自数据库的所有信息，脚本需要此信息才能正常工作。使用URL中的参数，我们让PHP脚本知道需要将哪些数据发送到网页。我们使用相同的模式来插入，更新和删除。

我们使用PHP json_encode函数来转换JSON中的数据，以便DataTables和我们自己的jQuery脚本可以读取和解析它们。我们使用称为“数据”的子数组传递数据。同一基数组中还有两个其他字段可以传递附加信息：数据库作业是否成功（结果： success或error ）和用于调试目的的消息（例如id missing ）。我们将此PHP页面data.php ，并将其与其他文件放在同一文件夹中。

我们自己的jQuery脚本

现在我们可以将所有内容放在一起。我们首先创建一个名为webapp.js的文件。在此文件中，我们将放入自己的jQuery代码以初始化DataTables和jQuery Validation。另外，我们编写代码以添加，更新和删除数据库记录。

首先，我们初始化jQuery DataTables插件并配置表设置。之后，还使用一些设置来调用jQuery Validator插件。我已经在添加/编辑表单中添加了图标，以便用户可以轻松查看输入字段是否正确填写。 jQuery Validation插件查看我们的HTML表单代码，并自动找出需要填写的输入字段。这是通过将required属性添加到必填字段来完成的。

我们执行Ajax请求，以使用JSON从Web服务器接收数据并将数据发送到Web服务器。会向用户显示一条加载消息，但是大多数时候您不会注意到它，因为处理这些任务只需要很少的时间。

图标字体

如果由于某种原因无法检索或提交数据，则会显示一条错误消息。例如，当无法访问数据库或没有可用的Internet连接时，就会发生这种情况。成功执行请求后，将重新加载DataTable概述，以便自动显示新公司或公司更新。而且，如果您使用垃圾桶按钮删除公司，由于DataTable概述的自动更新，该公司将从表中消失。

实际应用

现在是时候测试网页，看一切是否按预期工作。您需要在线运行此应用程序，因此将文件上传到Web服务器（将data.php ， index.html ， layout.css和webapp.js放在同一文件夹中）非常重要。不要忘记正确设置MySQL数据库并插入示例数据。

当所有文件和数据库数据都放置到位后，您可以通过运行index.html来启动应用程序。您也可以在此处在线查看该应用程序。

应用程序的主屏幕

使用右上角的搜索字段，您可以搜索HTML表格。搜索结果将在执行搜索后直接显示。每次在此搜索字段中输入字符时，jQuery DataTables插件都会进行搜索，因此您在键入时会看到搜索结果。用户还可以选择他希望在每个页面上看到的记录数。另外，jQuery DataTables插件使单击列标题对列进行排序成为可能：它将从头到尾对列中的数据进行排序，反之亦然。

当您单击“添加公司”时，将显示一个表格以添加新公司。借助jQuery Validation插件，可以对用户的表单输入进行客户端验证。为了简单起见，本文不执行服务器端验证。在实际应用中，必须始终在客户端和服务器端都验证用户的输入。这样做是为了确保仅对数据库执行有效查询和保存查询。

添加和编辑屏幕