jQuery发送json请求+保存coockie案例

前端登录实现与Cookie管理

最新推荐文章于 2025-10-07 13:25:04 发布

原创最新推荐文章于 2025-10-07 13:25:04 发布 · 265 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#json #jquery #javascript

前端个人笔记专栏收录该内容

20 篇文章

订阅专栏

该博客详细介绍了前端登录功能的实现，包括用户名和密码的验证，使用JSON.stringify处理请求参数，以及AJAX进行POST请求到指定API。同时，文章还涉及到Cookie的设置与获取，包括设置和删除Cookie的函数实现，确保用户登录状态的维护。

$("#submit").click(function () {
  let userName = $("#userName").val();
  let password = $("#password").val();

  if (!userName) {
    alert("用户名不能为空");
    return;
  }
  if (!password) {
    alert("密码不能为空");
    return;
  }

  let param = { userName: userName, password: password };
  param = JSON.stringify(param);
  console.log(param);
  $.ajax({
    type: "POST",
    url: "http://127.0.0.1:8080/api/login",
    datatype: "json",
    headers: {
      "content-type": "application/json;charset=utf-8",
      token: getCookie("token"),
    },
    async: false,
    data: param,
    success: function (res) {
      console.log(res);
      if (res.code == "1") {
        // 保存cookie
        SetCookie("token", res.data.token);
        SetCookie("userinfo", res.data);
        console.log(res);
      } else {
        alert(res.msg);
      }
    },
    error: function (err) {
      console.log(err);
    },
  });
});

//写cookies函数
function SetCookie(name, value) {
  //两个参数，一个是cookie的名子，一个是值
  var Days = 7; //此 cookie 将被保存 7 天
  var exp = new Date(); //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie =
    name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
  //取cookies函数
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]);
  return null;
}
function delCookie(name) {
  //删除cookie
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}