Angular通过srno删除数据报错：PHP接口正常，TS代码异常排查

看起来你遇到的问题主要有两个核心原因：URL参数拼接错误，以及前后端响应格式不匹配。咱们一步步来修复：

问题分析 #

先看你提供的错误信息：

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/angular_crud/delete.php?srno=srno", ok: false, …}

这里能看到两个关键问题：

1. 请求URL里的srno=srno明显不对——你把字符串"srno"直接传进去了，而不是用户输入的实际序号值。
2. 虽然HTTP状态码是200，但ok: false，这是因为Angular的HttpClient默认期望响应是JSON格式，但你的PHP接口返回的是纯文本（比如"Record delete successfully"），导致解析失败触发了错误。

修复步骤 #

1. 修正Angular的URL参数传递 #

你原来的代码里直接硬写了URL，没有把变量this.srno替换进去。推荐两种更可靠的写法：

写法一：用模板字符串拼接URL

personDelete(){
 this.srno = this.myControl1.value;
 // 用模板字符串插入实际的srno变量值
 const url = `http://localhost/angular_crud/delete.php?srno=${this.srno}`;
 // 指定responseType为'text'，匹配PHP返回的纯文本格式
 this.http.get(url, { responseType: 'text' }).subscribe(data => {
   console.log('删除结果:', data);
   // 这里可以添加成功提示，比如弹出消息或跳转到列表页
 }, error => {
   console.error('删除请求出错:', error);
 });
}

写法二：用HttpParams构建参数（更规范）

这种方式能自动处理参数编码，避免特殊字符问题：

personDelete(){
 this.srno = this.myControl1.value;
 // 构建请求参数
 const params = new HttpParams().set('srno', this.srno.toString());
 // 传递参数并指定响应类型
 this.http.get('http://localhost/angular_crud/delete.php', { params, responseType: 'text' }).subscribe(data => {
   console.log('删除结果:', data);
 }, error => {
   console.error('删除请求出错:', error);
 });
}

2. 优化PHP接口（推荐返回JSON格式） #

前后端交互用JSON是更标准的做法，也能避免Angular的解析错误。同时还要修复SQL注入风险（你原来的代码直接把用户输入拼进SQL，非常危险）：

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST,DELETE');
header("Access-Control-Allow-Headers: Content-Type");
// 设置响应内容为JSON格式
header('Content-Type: application/json');

$con = mysqli_connect("localhost","root", "", "savedata");
$srno = $_GET["srno"];

if($con->connect_error){
 // 返回JSON格式的错误信息
 echo json_encode(['success' => false, 'message' => "Connection failed: " . $con->connect_error]);
 die();
}

// 使用预处理语句防止SQL注入
$sql = "DELETE FROM savedata WHERE srno=?";
$stmt = $con->prepare($sql);
// 绑定参数："i"表示整数类型，如果srno是字符串就改成"s"
$stmt->bind_param("i", $srno);

if($stmt->execute()){
 echo json_encode(['success' => true, 'message' => "Record deleted successfully"]);
} else{
 echo json_encode(['success' => false, 'message' => "Error deleting record: ". $con->error]);
}

$stmt->close();
$con->close();
?>

如果改成JSON返回，Angular代码也可以对应调整为接收JSON：

// 先定义响应接口
interface DeleteResponse {
 success: boolean;
 message: string;
}

personDelete(){
 this.srno = this.myControl1.value;
 const params = new HttpParams().set('srno', this.srno.toString());
 this.http.get<DeleteResponse>('http://localhost/angular_crud/delete.php', { params }).subscribe(data => {
   console.log(data.message);
   if(data.success){
     alert(data.message);
     // 比如跳转到数据列表页
     // this.router.navigate(['/your-list-page']);
   } else {
     alert('删除失败：' + data.message);
   }
 }, error => {
   console.error('请求错误:', error);
 });
}

额外提醒 #

• 记得在Angular组件里如果要使用路由跳转，需要注入Router服务。
• 始终要注意SQL注入问题，预处理语句是必须的，不要直接拼接用户输入到SQL中。

内容的提问来源于stack exchange，提问作者Sachin Muthumala