WEB前端第五十五课——Ajax请求
作者：互联网
1.会话Session、缓存Cookie
session，可以理解为一种不断验证口令以获得用户持久链接的“访问机制”。
cookie，是当前访问的页面，由后台发往前台页面数据时所夹带的一小段信息。
原理说明：
当后台返回给前台数据的时候，添加的一段“持久”的信息，
因此，这段信息必须在PHP后台代码中插入添加。
相关技术：
① PHP中“$_GET”和“$_POST”对象，用于在PHP中获取 get 和 post 请求的数据对象；
② PHP中的“time()”方法用户获取当前的时间戳，单位是秒s，支持加减法；
③ PHP中 setcookie('key' , 'value' , 过期时间)，用于设置缓存；
④ HTML中 document.cookie 用于获取页面所保存的 cookie 值，类型是字符串。
2.jqAjax
ajax是一种前后台数据交互的手段。
原生的ajax实现比较麻烦，需要借助 xmlhttprequest对象构建。
JQajax则是jQuery已经封装好的现成方法。
说明：
① get无参请求，一般用于前台界面向后台请求获取数据，但不会向后台发送数据；
$_GET是PHP中的内置对象，用于接受前台发送过来的 get 请求数据包；
② get有参请求，一般用于前台界面向后台有条件（参数）的请求获取数据，一般参数都比较小；
③ post请求，一般用于登录、注册等保密性较高的场景；
$_POST是PHP中的内置对象，用于接受前台发送过来的 post 请求数据包；
④ echo 用于返回前端请求的指定数据；
⑤ json_encode对象，用于将数组或对象等复杂值转换成 json 格式的数据。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax请求</title>
<script src="JScodeFile/jquery-1.8.3.js"></script>
</head>
<body>
<span>Name</span><input type="text" class="userName"><br>
<span>Code</span><input type="password" class="userCode"><br>
<button>Get无参数</button>
<button>Get有参数</button>
<button>Post请求</button>
<script>
var $userName = $('.userName');
var $userCode = $('.userCode');
var $btns = $('button');
// Get无参数请求
$btns.eq(0).click(function () {
$.ajax({
//定义请求方式为 get
type:'get',
//设置请求发送的后台地址
url:'20210106Ajax.php',
//定义数据交互的格式
dataType:'json',
//设置回调函数，后台返回数据时，函数自动执行。
success:function (res) {
console.log(res);
console.log(res.msg2);
}
});
})
// Get有参数请求
$btns.eq(1).click(function () {
$.ajax({
//定义请求方式为 get
type:'get',
//设置请求发送的后台地址，以及需要发送的参数值，使用“？”及字符串拼接的形式
url:'20210106Ajax.php?userName='+$userName.val()+"&userCode="+$userCode.val(),
//定义数据交互的格式
dataType:'json',
//设置回调函数，后台返回数据时，函数自动执行。
success:function (res) {
console.log(res);
console.log(res.msg2);
}
});
})
// Post请求
$btns.eq(2).click(function () {
$.ajax({
//定义请求方式为 get
type:'post',
//设置请求发送的后台地址，以及需要发送的参数值，使用“data”发送参数
url:'20210106Ajax.php',
data:{
uName:$userName.val(),
uCode:$userCode.val(),
},
//定义数据交互的格式
dataType:'json',
//设置回调函数，后台返回数据时，函数自动执行。
success:function (res) {
console.log(res);
console.log(res.msg2);
}
});
})
</script>
</body>
</html>
<?php
/*
// get 无参数请求
$backData1 = array ('msg1'=>'oneSuccess','msg2'=>'twoSuccess');
//使用 json_encode()将数据转换成 json 格式，并通过 echo 将其返回给前台。
echo json_encode($backData1);
// get 有参数请求
$backData2 = array ('msg1'=>'oneSuccess','msg2'=>$_GET);
//使用 json_encode()将数据转换成 json 格式，并通过 echo 将其返回给前台。
echo json_encode($backData2);
*/
// post 请求
$backData2 = array ('msg1'=>'oneSuccess','msg2'=>$_POST);
//使用 json_encode()将数据转换成 json 格式，并通过 echo 将其返回给前台。
echo json_encode($backData2);
?>
3.登录交互案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="JScodeFile/jquery-1.8.3.js"></script>
</head>
<body>
<span>Name：</span><input type="text" class="userName">
<span>Code：</span><input type="password" class="userCode">
<button>用户登录</button>
<script>
$('button').click(function () {
$.ajax({
type:'post',
url:'20210106Ajax.php',
data:{
userName:$('.userName').val(),
userCode:$('.userCode').val(),
},
dataType:'json',
success:function (fBack) {
console.log(fBack);
if (fBack.result==1){
alert('登录成功！')
}else{
alert('用户名或密码错误！')
}
},
})
});
</script>
</body>
</html>
<?php
$usName = $_POST['userName'];
$usCode = $_POST['userCode'];
$nameList = array('Rebecca'=>'111111');
$fBack = array();
if($usCode==$nameList[$usName]){
$fBack['result']=1;
}else{
$fBack['result']=0;
};
echo json_encode($fBack);
?>
标签：WEB,第五十五,请求,get,res,json,echo,Ajax,后台 来源： https://www.cnblogs.com/husa/p/14239104.html