老师，我这里不清楚为什么，原生AJAX时，前台打印了数据，后台还是报错。
1618196895(1).png
1618196925(1).png
用jquery 的ajax时，post 方法前台收不到数据，后台也接收不到数据，但是我看请求后台也有数据。而用get 方法不会出现这个问题。报错如下：
1618197006(1).png
1618197022(1).png
1618197040(1).png
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ajsx回顾</title>
<script src="jquery-3.5.1.js"></script>
</head>
<style>
</style>
<body>
<div>
<button class="btn1">原生ajax</button><br>
<button class="btn2">jquery的ajax</button><br>
</div>
<script>
//获取类
var btnone=document.querySelector('.btn1');
var btntwo=document.querySelector('.btn2');
//原生ajax封装
btnone.onclick=function () {
//开始准备发送
//创建一个xhr对象 准备发送ajax请求
//考虑兼容性问题 目前用到的很少
// if(window.XMLHttpRequest){
// var xhr=new XMLHttpRequest();
// }else if(window.ActiveXObject){
// var xhr=new ActiveXObject();
// }
var xhr=new XMLHttpRequest();
//目的：用onreadystatechange监听后台是否收到前台数据的回调函数
xhr.onreadystatechange=function () {
//判断前台向后台发送请求的状态 值为0 1 2 3 4
if(xhr.readyState==4){
//判断前端是否准备收到后台反馈得数
if(xhr.status==200) {
//获取后台传送的数据
console.log(xhr.responseText)
//解析数据
// console.log(JSON.parse(xhr.responseText))
}
}
}
//请求超时 设置时间限制 封装可不加
xhr.timeout=5000;//单位毫秒
//超过5s 自动执行函数 xhr.onreadystatechange函数不会执行
xhr.ontimeout=function () {
console.log('连接超时,请刷新页面')
}
// post方法
var data=new FormData();
data.append('pass','mary')
data.append('name','mary')
//当准备好接收后台数据的回调函数后，着手准备发送ajax请求
xhr.open('post','ajax.php',true);
//设置后通过send方法发送到后台post
xhr.send(data);
}
//--------------------
//jquery 的ajax
btntwo.onclick=function () {
$.ajax({
type:'post',
url:'ajax.php',
dataType:'json',
data:{
name:'bexi',
pass:'12',
},
success:function (res) {
console.log(res)
}
})
}
</script>
</body>
</html><?php
print_r($_POST);
print_r($_POST['name']);
echo json_encode($_POST);
?>
京公网安备 11011402011233号
