html连接mysql数据库
时间: 2023-07-27 16:07:40 浏览: 48
要连接 MySQL 数据库,可以使用 PHP 语言来编写服务器脚本,然后在 HTML 页面中使用表单和 JavaScript 来调用这些脚本。
以下是一个简单的示例:
1. 首先,在 MySQL 数据库中创建一个表格,例如:
```
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
```
2. 编写一个 PHP 脚本来连接数据库,并将表单提交的数据插入到表格中,例如:
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取表单数据
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
// 将数据插入表格
$sql = "INSERT INTO users (firstname, lastname, email)
VALUES ('$firstname', '$lastname', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
3. 在 HTML 页面中创建一个表单,使用 JavaScript 来调用 PHP 脚本,例如:
```html
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
Email:<br>
<input type="text" name="email"><br>
<br>
<input type="button" onclick="insertData()" value="Submit">
</form>
<script>
function insertData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("POST", "insert.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "firstname=" + document.getElementsByName("firstname")[0].value +
"&lastname=" + document.getElementsByName("lastname")[0].value +
"&email=" + document.getElementsByName("email")[0].value;
xhttp.send(data);
}
</script>
```
在这个示例中,当用户点击“Submit”按钮时,JavaScript 函数 `insertData()` 会发送一个 POST 请求到服务器上的 PHP 脚本 `insert.php`。PHP 脚本将获取表单数据并将其插入到 MySQL 数据库中。然后,服务器会返回一个响应,JavaScript 会弹出一个提示框显示响应内容。