WEB前端第五十五课——Ajax请求

来源：cnblogs　　作者：后来喵　　时间：2021/1/11 9:46:58　　对本文有异议

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);
?>