先放代码

请仔细阅读注释部分

/*
注: 本文主要介绍了如何在原生JavaScript中实现前端向后端交互,
包括基本的字符串(json)方式与图片等二进制文件(formdata)的交互方式
*/

//下面是json交互方式
function () {
        // console.log(gettoken());
        let Token = gettoken();
        $.ajax({//获取玩家昵称和头像
            async: false,//禁用了同步执行,会加载的更快,但可有可无
            type: "GET",
            url: Generated + "/setting/get_picture",
            headers: {
                'token': Token
            },
            dataType: "json",
            success: function (response) {
                console.log("图片获取成功");
                console.log(response.data);
            },
            error: function () {
                console.warn('未登录!');
            }
        })

//下面是图片交互方式

var formData = new FormData();
        formData.append("image", $("#changehead")[0].files[0]);
// $("#changehead")是jQuery的元素选择器,括号里面的写法是css选择样式,这里的changehead是一个input元素(文件类型)的id
// (input type="file" id="changehead" accept="image/gif,image/jpg,image/jpeg,image/png,image/svg")
        let Token = gettoken();//下面会介绍这个函数
$.ajax({
            url: Generated + "/setting/update_picture",
            method: "POST",
            headers: {
                'token': Token
            },
            data: formData, //数据类型
            Cache: false, // 取消缓存
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            //fileElementId : "changeheadform"+type,// 文件上传表单的id
            dataType: 'text',// 返回数据类型
            success: function (data) //成功响应
            {
                $.ajax({//获取玩家昵称和头像
                    async: false,
                    type: "GET",
                    url: Generated + "/setting/get_picture",
                    headers: {
                        'token': Token
                    },
                    dataType: "json",
                    success: function (response) {
                        console.log("修改后图片获取成功");
                        console.log(response.data);
                        ss.avatarSrc = response.data;
                    },
                    error: function () {
                        console.warn('未登录!');
                    }
                })
            },
            error: function (data) {
                alert("服务器异常,请稍后再试");
            }
        });

Ajax

• 详细介绍:
  https://blog.csdn.net/weixin_50602266/article/details/121910781
• 省流:
  在html文件中所有script标签之前任意合适的地方加上

  (script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js")(/script)
  // ()记得改为尖括号

  以导入jquery(一个组件包,可以简化代码写法)支持

$.ajax({ //jquery中的ajax方法
            type: "GET", //请求的类型:GET/POST
            url: Generated + "/setting/get_picture", //网址
            headers: { //请求头,如果你不了解请求头,可以看看如下的视频
            // https://www.bilibili.com/video/BV1WC4y1b78y?p=5&vd_source=a55865a74619744565284b595e51cead
                'token': Token //加入了token,验证身份
            },
            dataType: "json", //规定数据的格式
            //如果是POST请求,添加
            // data:{
            //      'nickname': nickName
            // }
            // 其中nickname是后端规定的键名,根据你的项目实际情况而定,可以有多个,中间用分号隔开
            */
            success: function (response) { //请求成功会执行这一部分,服务器返回内容的变量名为response
                console.log("图片获取成功");//控制台输出语句,输出括号中内容
                console.log(response.data);
            },
            error: function () { //请求失败会执行这一部分
                console.warn('未登录!'); //控制台警告语句,高亮输出括号中内容
            }
        })

Token

简单的来说,token就是一个蕴含信息的"乱码"字符串. 在前后端分离的背景下,前端请求的headers中加入token即可验证身份.

token的获取与使用

cookie

• cookie获取

success: function(response){
    const TIMEOUT = 60 * 60 * 24 * 5;//五天
    document.cookie = 'token='+response.data+'; 
    max-age='+TIMEOUT;
}
// 其中response是服务器返回内容的变量名
// TIMEOUT则是预先规定的cookie的留存时间(单位为秒)

• cookie使用

function getToken() {
    let strcookie = document.cookie; //从cookie中提取数据
    let arrcookie = strcookie.split("; ");//字符串分割
    for (let i = 0; i < arrcookie.length; i++) {
        //查找"token"这个键名
        let arr = arrcookie[i].split("=");
        if (arr[0] == 'token') {
            return arr[1];//返回token值
        }
    }
    return "";
}

headers: {
        'token': getToken()
    },

sessionStorage

• sessionStorage获取

success: (response) => { //匿名函数的高级写法
     sessionStorage.setItem('token', response.data);
     //设定键名与键值
},

• sessionStorage使用

headers: {
        'token': sessionStorage.getItem("token")//通过键名获取键值
},

龚佳轩