大事件项目-切换头像时遇到的传参格式错误导致不能切换头像的问题

项目场景：大事件项目-切换头像时遇到的不能切换头像的问题

---

问题描述

在收集到数据，发起Ajax请求后，要实现切换头像功能。
点击确认后，控制台打印出了“切换成功”，并且重新渲染头像时也能成功获取数据，但是获取到的头像是null

$.ajax({
      method: "post",
      url: "/my/update/avatar",
      data: avatar,
      success: function (res) {
      	// 打印获取数据
        console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg(res.message);
        // 成功
        /**
         * 头像更改成功后，要重新渲染头像，
         */
        window.parent.getUserList();
      },
});

此时Ajax请求发送是成功的。

另一边渲染头像，获取是成功的，但是没有头像数据。

getUserList();
function getUserList() {
  /**
   * 发起ajax请求，获取用户信息
   * /my/...
   * 需要权限，需要在请求头中携带 Authorization 身份认证字段，才能正常访问成功
   * headers 设置请求头
   * 得到用户信息后，
   * 更新头像，如果有头像，就设置；没有，就是用户名首字母大写
   */
  $.ajax({
    method: "get",
    url: "/my/userinfo",
    success: function (res) {
        console.log(res);
      if (res.status !== 0) {
        return layui.layer.msg(res.message, { icon: 5 });
      }
      // 获取成功，渲染头像
      // console.log(res.data);
      if (res.data.user_pic) {
        // console.log(12);
        // 有头像，就设置头像。
        $(".layui-nav-img").attr("src", res.data.user_pic).show();
        $(".text-avater").hide();
      } else {
        // 没有头像，就截取用户名首字母大写
        var n = res.data.username.substr(0, 1);
        $(".text-avater").html(n).show();
        $(".layui-nav-img").hide();
      }
      // 设置名字，有nickname就设昵称，没有就是username用户名
      var uname = res.data.nickname || res.data.username;
      //   console.log(uname);
      $("#welcome").html("欢迎：" + uname);
    },
  });
}

---

原因分析：

这里可以看出是因为头像数据获取失败，需要重新确认传入参数是否正确。

// 获取数据 Ajax需要的是base64格式的字符串，所以需要将图片输出为base64格式的字符串。
    var avatar = $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL("image/png"); // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

显然，传入的参数是字符串，而下面写的是
data: avatar,
这种方式传参，不加大括号用的是 键=值&键=值 的形式进行传参的，
而这里获取到的数据是字符串，所以就算起了一样的名字，也不能直接data: avatar,
而是要写data:{avatar}，以对象形式传参。

---

解决方案：

将参数改成：

	 data: {
  		 avatar: avatar,
	},

或者是：

      data: { avatar },

因为var定义时，定义了和参数的属性名一样的名字，所以可以省略一个。