在 Angular 中，可以使用 `p-
checkbox` 组件来生成
复选框。它属于 `primeng` 组件库，需要在项目中引入。可以通过 `[(ngModel)]` 指令来绑定
复选框的值。例如：
```html
<p-
checkbox name="hobby" value="reading" [(ngModel)]="hobbies['reading']"></p-
checkbox>
<p-
checkbox name="hobby" value="music" [(ngModel)]="hobbies['music']"></p-
checkbox>
<p-
checkbox name="hobby" value="sports" [(ngModel)]="hobbies['sports']"></p-
checkbox>
<button (click)="submit()">提交</button>
```
在上面的代码中，`[(ngModel)]` 指令绑定了每个
复选框的值到 `hobbies` 对象中的相应属性上。当用户选择
复选框时，`hobbies` 对象中对应的属性值会被更新。
接下来，在 Angular 中可以使用 `HttpClient` 模块来向后台发送 HTTP 请求。可以在组件的 `submit()` 方法中获取 `hobbies` 对象，并将其作为
参数发送到后台。例如：
```typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<p-
checkbox name="hobby" value="reading" [(ngModel)]="hobbies['reading']"></p-
checkbox>
<p-
checkbox name="hobby" value="music" [(ngModel)]="hobbies['music']"></p-
checkbox>
<p-
checkbox name="hobby" value="sports" [(ngModel)]="hobbies['sports']"></p-
checkbox>
<button (click)="submit()">提交</button>
`
})
export class AppComponent {
hobbies = {
reading: false,
music: false,
sports: false
};
constructor(private http: HttpClient) {}
submit() {
const selectedHobbies = Object.keys(this.hobbies).filter(key => this.hobbies[key]);
this.http.post('/insert.
php', { hobbies: selectedHobbies }).subscribe(() => {
console.log('插入成功');
});
}
}
```
在上面的代码中，`submit()` 方法获取了 `hobbies` 对象中被选中的
复选框的值，然后使用 `HttpClient` 向后台发送 POST 请求，将选中的值作为
参数发送到 `/insert.
php` 脚本中。后台脚本可以解析 POST 请求的
参数，并将其插入到 SQL 数据库中。例如：
```
php
<?
php
$selectedHobbies = $_POST['hobbies'];
if (!empty($selectedHobbies)) {
$dbhost = 'localhost';
$dbname = 'test';
$dbuser = 'root';
$dbpass = 'password';
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
foreach ($selectedHobbies as $hobby) {
$stmt = $conn->prepare("INSERT INTO user (hobby) VALUES (:hobby)");
$stmt->bindParam(':hobby', $hobby);
$stmt->execute();
}
echo '插入成功';
} else {
echo '未选择任何爱好';
}
?>
```
在上面的
PHP 脚本中，首先解析 POST 请求的
参数，然后连接 MySQL 数据库，并循环插入选中的值。需要注意的是，这里使用了 PDO 对象和占位符，以防止 SQL 注入攻击。
扫一扫
1247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
