动态添加到数据库的新一行 (js动态的加入一行数据库)

随着前端技术的不断发展，越来越多的网站开始使用JavaScript来动态地操作网页，从而提高用户的交互体验。而JavaScript还可以通过Ajax技术将数据直接传输到后端数据库，实现数据的实时更新和存储。本文将介绍如何使用JavaScript动态地添加新一行数据到数据库中。

1. 创建数据库

我们需要创建一个数据库来存储我们的数据。MySQL是一个流行的开源关系型数据库管理系统，我们可以使用它来创建我们的数据库。

假设我们想要创建一个包含id、name和age三个字段的表格，可以在MySQL命令行中输入以下命令：

“`

CREATE TABLE people (

id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(30) NOT NULL,

age INT(3) NOT NULL

)

“`

这将创建一个名为“people”的表格，并定义了id、name和age三个字段。其中id是自增长的主键，name和age都不能为空。

2. 编写前端代码

接下来，我们将编写前端代码来实现在网页中添加新一行数据的功能。我们可以使用jQuery库来简化JavaScript的编写。

HTML代码：

“`html

Add Data to Database

Name:

Age:

Submit

“`

这里我们将创建一个包含表格和表单的网页。表单中有两个输入框（name和age），以及一个提交按钮。

当用户点击提交按钮时，我们将通过JavaScript代码将用户输入的数据传递给后端数据库，并在表格中动态添加一行新数据。

JavaScript代码：

“`javascript

$(document).ready(function(){

// 添加按钮点击事件

$(“#submit”).click(function(){

var name = $(“#name”).val();

var age = $(“#age”).val();

// 发送Ajax请求

$.post(“add.php”,

{

name: name,

age: age

},

function(data, status){

alert(“Data: ” + data + “\nStatus: ” + status);

// 更新表格中的数据

var tbody = $(“#data”);

var len = tbody.find(“tr”).length;

var id = len + 1;

var row = $(“

.append($(“

.append($(“

.append($(“

tbody.append(row);

});

});

});

“`

这段JavaScript代码中，我们首先使用jQuery的$(document).ready()函数来确保文档加载完成后再执行代码。

接着，我们为提交按钮添加了一个点击事件的监听器。当用户点击提交按钮时，我们将获取用户输入的姓名和年龄，并通过Ajax发送POST请求到“add.php”文件。

在服务器端，我们将通过PHP代码来连接数据库并将用户输入的数据添加到数据库表格中。

PHP代码（add.php）：

“`php

$servername = “localhost”;

$username = “username”;

$password = “password”;

$dbname = “mydatabase”;

// 创建连接

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功

if ($conn->connect_error) {

die(“Connection fled: ” . $conn->connect_error);

}

// 获取POST请求中的数据

$name = $_POST[“name”];

$age = $_POST[“age”];

// 在数据库中添加新数据

$sql = “INSERT INTO people (name, age) VALUES (‘$name’, ‘$age’)”;

if ($conn->query($sql) === TRUE) {

echo “New record created successfully”;

} else {

echo “Error: ” . $sql . “
” . $conn->error;

}

$conn->close();

?>

“`

在PHP代码中，我们首先定义了连接MySQL数据库的参数，并创建了一个名为“mydatabase”的数据库。接着，我们检查连接是否成功，并获取POST请求中的数据。

我们将通过SQL语句将获取的数据添加到数据库中，并返回成功或失败的信息给前端页面。

3. 运行程序

现在，我们已经编写好了前端和后端的代码，可以运行程序来测试是否成功地将新数据添加到数据库中。

将上述代码保存为三个文件（HTML、JavaScript和PHP），并将它们放在一个Web服务器上。当用户访问该Web页面时，他们将看到一个包含表单和表格的页面，可以在表单中输入数据并提交。

当用户提交数据后，前端JavaScript代码将通过Ajax将数据送到后端PHP代码中，后端PHP代码将连接数据库并将数据存储到数据库中。

前端JavaScript代码将从服务器响应中获取成功或失败的信息，并在页面上动态地添加一行新数据。