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

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

 

posted @ 2021-01-06 16:56  后来喵  阅读(161)  评论(0编辑  收藏  举报