html5 和 mysql 通信 代码
时间: 2023-06-23 16:09:38 浏览: 64
HTML5 是前端技术,而 MySQL 是后端数据库,它们之间的通信需要通过中间的服务端来实现。以下是一个简单的示例代码:
HTML5 页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 和 MySQL 通信示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "save_data.php",
data: { name: name, email: email },
success: function(response) {
alert(response);
}
});
});
});
</script>
</head>
<body>
<h1>HTML5 和 MySQL 通信示例</h1>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<button id="submit">提交</button>
</body>
</html>
```
上面的代码中,我们使用了 jQuery 库来简化 AJAX 请求的代码。当用户点击提交按钮时,会向 `save_data.php` 发起 POST 请求,并将表单中的姓名和邮箱作为参数传递过去。
下面是 `save_data.php` 文件的代码:
```php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
// 连接 MySQL 数据库
$conn = mysqli_connect("localhost", "username", "password", "database_name");
// 插入数据
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if (mysqli_query($conn, $sql)) {
echo "数据保存成功!";
} else {
echo "保存数据时发生错误:" . mysqli_error($conn);
}
// 关闭数据库连接
mysqli_close($conn);
?>
```
上面的代码中,我们首先从 POST 请求中获取用户提交的姓名和邮箱,然后使用 `mysqli_connect` 函数连接到 MySQL 数据库,并将数据插入到 `users` 表中。最后返回保存结果给前端页面。
注意:上面的代码仅供参考,实际应用中需要对用户输入进行合法性校验和安全防范。