有效沟通问答-【官方】百战程序员_IT在线教育培训机构

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 132358个问题

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie案例</title>
    <style type="text/css">
        .loginRegistDiv{
            text-align: center; padding: 15px;
            border: 1px solid black; width:300px; min-height:30px;
        }
        .welcomeDiv{
            text-align: center; padding: 15px;
            border: 1px solid black; width: 300px; min-height:30px;
            display: none;
        }
        .nickNameSpan{
            color: green; font-size: 22px; font-weight: bold;
        }
    </style>
</head>
<body>
<div class="loginRegistDiv">
    <label for="userName">
        <span>用户名:</span><input type="text" id="userName" placeholder='请输入用户名'>
    </label><br/>
    <label for="password">
        <span>密&nbsp;&nbsp;&nbsp;码:</span><input type="text" id="password" placeholder='请输入密码'>
    </label><br/><br/>
    <button class="loginBtn">登录</button>
    <button class="registBtn">注册</button>
</div>
<div class="welcomeDiv">
    欢迎回来，尊敬的：
    <span class='nickNameSpan'>哈哈哈</span>
    <br/><br/>
    <button class="exitBtn">注销登录</button>
</div>
<script>
    //页面逻辑
    ;(function(){
        var loginBtn=document.querySelector('.loginBtn');
        var userNameInput=document.querySelector('#userName');
        var passwordInput=document.querySelector('#password');
        var welcomeDiv=document.querySelector('.welcomeDiv');
        var loginRegistDiv=document.querySelector('.loginRegistDiv');
        var nickNameSpan=document.querySelector('.nickNameSpan');
        var exitBtn=document.querySelector('.exitBtn');
        //表示一个自动登录的功能
        function  getCookie(){
            var cookie=document.cookie;
            var  cookieArr=cookie.split(';');
            var finalObj={};
            for(var i=0;i<cookieArr.length;i++){
                var tempArr=cookieArr[i].trim().split('=');
                finalObj[tempArr[0]]=tempArr[1];
            }
            return finalObj;
        }
        var cookieObj=getCookie();
        if(cookieObj.nickName!=undefined){
            if(cookieObj.nickName.length!=0){
                loginRegistDiv.style.display='none';
                welcomeDiv.style.display='block';
                nickNameSpan.innerHTML=cookieObj.nickName;
            }
        }
        loginBtn.onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange= function () {
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var data=JSON.parse(xhr.responseText);
                        if(data.loginStatusCode==1){
                            loginRegistDiv.style.display='none';
                            welcomeDiv.style.display='block';
                            nickNameSpan.innerHTML=data.nickName;
                        }
                    }
                }
            };
            var formData=new FormData();
            formData.append('uname',userNameInput.value);
            formData.append('upass',passwordInput.value);
            xhr.open('post','cookie案例后台.php',true);
            xhr.send(formData);
        }
        //退出登录按钮
        exitBtn.onclick= function () {
            userNameInput.value='';
            passwordInput.value='';
            loginRegistDiv.style.display='block';
            welcomeDiv.style.display='none';
            //清除cookie
            var expires=new Date(new Date().getTime()+1).toGMTString();
            document.cookie='nickName=beixi;expires='+expires;
        }
    })();
</script>
</body>
</html>

php

<?php
$success=('msg'=>'ok');
$userName=$_POST['uname'];
  $password=$_POST['upass'];
  /*
     假设经过了数据库的出来
     假设已经认证登录成功，需要添加cookie
  */
  //登录成功之后对页面添加cookie
  setcookie('nickName','beixi',time()+3600*24);
  //回馈前端表示登录成功，使用状态码loginStatusCode   0表示失败  1表示成功
  $success['loginStatusCode']=1;
  $success['nickName']='beixi';
 echo  json_encode($success);
?>

页面没有显示是哪里有问题的呢

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 61楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cookie复杂存储</title>
</head>
<body>
    <button>点我</button>
    <script>

        (function() {
            var xhr=window.XMLHttpRequest
            ?new XMLHttpRequest()
            :new ActiveXObject();
            xhr.onreadystatechange=function() {
                if(xhr.readyState==4) {
                    if(xhr.status==200) {
                        console.log(xhr.responseText)
                    }
                }
            }
            var datas=new FormData();
            datas.append('name','taige');
            datas.append('hobby','eat');
            xhr.open('post','cookie后台.php',true);
            xhr.send(datas);
        }());
    </script>
</body>
</html>

<?php
    // 处理cookie
    $name=$_POST['name'];
    $hobby=$_POST['hobby'];
    setcookie('name',$name,time()+60*60);
    setcookie('hobby',$hobby,time(+60*60));

    // 给出反馈
    $success=array('msg'=>'ok');
    echo json_encode($success);
?>

老师，我前后台数据都提交了，您看看。我返回的结果是这玩意！！

QQ截图20210210160444.png

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 62楼

集成环境打开了还是这样，然后不晓得是不是应该配置php环境变量，安装了appserv，但是还是这样

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 63楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="button" value="视频" onclick="getMedia()">
<video src="" width="500px" id="video" height="500px"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="takePhone()" id='but'>拍照</button>
</body>
<script>
    var video = document.getElementById("video");
    function getMedia() {
        var constrains = {
            video:{
                width:500,
                height:500
            },
            audio:true
        };
        var promise = navigator.mediaDevices.getUserMedia(constrains);
        promise.then(function (MediaStream) {
            video.Object = MediaStream;
            video.play();
        })
    }
    function takePhone() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(video,0,0,500,500);
    }
</script>
</html>

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 64楼

这个怎么搞

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 65楼

同学您好