JS通过AJAX请求PHP接口的核心是前端发HTTP请求、后端接收并响应：一、原生XMLHttpRequest需设Content-Type、URL编码发送；二、fetch发送JSON时PHP须用php://input读取；三、PHP需判请求方式、过滤输入、设header输出JSON；四、注意跨域、UTF-8编码、XSS与SQL注入防护。
JS通过AJAX请求PHP接口，核心是用前端发HTTP请求、后端PHP接收并响应。关键不在“能不能”，而在于“怎么发得稳、接得准、用得安全”。下面分四块说清楚。
一、原生XMLHttpRequest发POST请求（最常用）
适合需要兼容老浏览器或想掌控底层细节的场景：
- 创建请求对象：
const xhr = new XMLHttpRequest(); - 配置请求：
xhr.open('POST', 'api.php', true);（第三个参数true表示异步） - 设置请求头，声明数据格式：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - 监听响应：
xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; - 发送数据（需URL编码）：
xhr.send('name=' + encodeURIComponent('张三') + '&age=25');
二、Fetch API替代方案（推荐新项目）
语法更简洁、基于Promise，现代浏览器支持良好：
- 发送JSON数据示例：
fetch('api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: '李四', age: 30 }) }) - 处理响应：
.then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)); - 注意：PHP端需用
file_get_contents('php://input')读取原始JSON，不能直接用$_POST
三、PHP端怎么正确接收和响应
前端发得对，后端接不住等于白搭：
立即学习“PHP免费学习笔记（深入）”；
- 判断请求方式：
if ($_SERVER['REQUEST_METHOD'] !== 'POST') die('仅接受POST'); - 接收表单数据：
$name = $_POST['name'] ?? '';（记得加空值判断） - 接收JSON数据：
$raw = file_get_contents('php://input'); $data = json_decode($raw, true); - 返回JSON响应（必须设头）：
header('Content-Type: application/json; charset=utf-8'); echo json_encode(['code'=>0, 'msg'=>'成功', 'data'=>$result]);
四、几个容易踩的坑
不是写完就能跑通，这些细节决定成败：
-
跨域问题：若JS和PHP不在同一域名下，PHP需加响应头：
header('Access-Control-Allow-Origin: *');（生产环境建议指定域名） -
中文乱码：确保HTML页面、PHP文件、数据库连接都用UTF-8；PHP开头加
header('Content-Type: text/html; charset=utf-8'); -
安全过滤：不要直接把
$_POST数据拼进SQL或输出到页面，用htmlspecialchars()、mysqli_real_escape_string()或PDO预处理 - 调试技巧：Chrome开发者工具Network标签页看请求是否发出、状态码是否200、Response内容是否符合预期
