在本地的服务器上创建一个mysql类型的数据库,叫register, 库中有一个名为user的数据表,包括以下字段:id(主键,自增), username, trueName, password, sex, age, favor, province, intro;创建一个html页面呈现用户注册表单,并对用户注册表单进行适当的美化,如各个表单元素对齐等;后台一个php页面,用于将注册数据的插入到数据库中。要求必须用jq ajax相关技术实现。结果保存到服务器个人文件夹里面,文件夹名称为学号+姓名。
时间: 2023-11-22 12:52:23 浏览: 119
很高兴为您解答这个问题。下面是详细的步骤:
1. 在本地的服务器上创建一个mysql类型的数据库,叫register, 库中有一个名为user的数据表,包括以下字段:id(主键,自增), username, trueName, password, sex, age, favor, province, intro。
可以使用以下的SQL语句创建该数据表:
```sql
CREATE DATABASE IF NOT EXISTS register;
USE register;
CREATE TABLE IF NOT EXISTS user(
id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
trueName VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
sex ENUM('男', '女', '保密') NOT NULL,
age INT(11) NOT NULL,
favor VARCHAR(200) NOT NULL,
province VARCHAR(50) NOT NULL,
intro TEXT NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```
2. 创建一个html页面呈现用户注册表单,并对用户注册表单进行适当的美化,如各个表单元素对齐等。
可以使用以下HTML代码创建注册表单:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册表单</title>
<style>
label {
display: inline-block;
width: 100px;
text-align: right;
}
input[type="text"], input[type="password"], select {
font-size: 16px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
}
textarea {
font-size: 16px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 400px;
height: 100px;
}
button {
font-size: 16px;
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #3E8E41;
}
</style>
</head>
<body>
<h1>用户注册表单</h1>
<form id="register-form">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="trueName">真实姓名:</label>
<input type="text" id="trueName" name="trueName" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="sex">性别:</label>
<select id="sex" name="sex">
<option value="男">男</option>
<option value="女">女</option>
<option value="保密">保密</option>
</select>
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="0" max="200" required>
</div>
<div>
<label for="favor">爱好:</label>
<input type="text" id="favor" name="favor" required>
</div>
<div>
<label for="province">省份:</label>
<input type="text" id="province" name="province" required>
</div>
<div>
<label for="intro">个人介绍:</label>
<textarea id="intro" name="intro" required></textarea>
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#register-form').submit(function(event) {
event.preventDefault();
$.ajax({
url: 'register.php',
type: 'POST',
data: $(this).serialize(),
success: function(response) {
alert(response);
}
});
});
});
</script>
</body>
</html>
```
3. 后台一个php页面,用于将注册数据的插入到数据库中。
可以使用以下PHP代码将用户注册数据插入到数据库中:
```php
<?php
header('Content-type:text/html;charset=utf-8');
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "register";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
mysqli_set_charset($conn, "utf8");
$username = $_POST['username'];
$trueName = $_POST['trueName'];
$password = md5($_POST['password']);
$sex = $_POST['sex'];
$age = $_POST['age'];
$favor = $_POST['favor'];
$province = $_POST['province'];
$intro = $_POST['intro'];
$sql = "INSERT INTO user (username, trueName, password, sex, age, favor, province, intro) VALUES ('$username', '$trueName', '$password', '$sex', '$age', '$favor', '$province', '$intro')";
if ($conn->query($sql) === TRUE) {
echo "注册成功!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
注意:在实际使用中,需要将$servername, $username, $password, $dbname替换成自己的数据库信息。
4. 结果保存到服务器个人文件夹里面,文件夹名称为学号+姓名。
可以将上述HTML代码和PHP代码保存到自己的服务器个人文件夹里面,并将文件夹命名为自己的学号+姓名。在浏览器中打开该HTML页面,填写注册表单后点击注册按钮即可将用户注册数据插入到数据库中。
阅读全文