从angular页面,使用的是primeng组件库,获取复选框的值并插入sql数据库
时间: 2024-03-10 16:49:34 浏览: 72
在 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 注入攻击。
阅读全文