大事件后台项目登录失败

最新推荐文章于 2024-03-29 22:45:02 发布

howtomakeit69

最新推荐文章于 2024-03-29 22:45:02 发布

阅读量618

点赞数 1

本文链接：https://blog.csdn.net/howtomakeit69/article/details/121011475

版权

本文记录大事件后台管理项目的登录事件中，浏览器返回的res.status与通过postman调用的接口返回的status不相同的原因。为什么导致了登录失败。先说个人的结论：

数据提交的格式不同，status值也会不一样。值不一样，就会登录失败。我们知道，post请求的数据提交格式有以下四种：application/x-www-form-urlencoded、multipart/form-data、raw、binary。常用的是前两种。同样的数据，application/x-www-form-urlencoded格式调用api返回的内容是这样：

图1正确的返回数据（x-www-form-urlencoded格式）

而multipart/form-data格式调用的api返回的数据是这样：

图二错误的返回数据（form-data格式）

那么问题来了，我们在客户端上接收到的返回数据是以上哪种呢？先通过浏览器控制台输出一波得知很不幸是第二种（图二）

//如果返回的status值是1，则登录失败，且提示message的内容 
 if (res.status !== 0) {
                console.log(res.status)
                return layer.msg(res.message)
            } layer.msg('登录成功')

图三

图四真实的返回status

那就说明，我们js文件中传输给服务器端的数据类型不对，我们要更改它的数据传输类型为x-www-form-urlencoded，通过层层搜索如何更改Ajax post请求数据类型，有很多种写函数再调用的方式，可这对新手不太友好。最终个人想到的是在Ajax APIs中找有什么办法可以在调用post请求时，自带传输的数据类型为我想要的格式（实际情况不是直接就找到，而是排除了几种办法）

看到一个熟悉的办法虽然它不符合我的要求，但感觉有眉目了（要解决本问题，我们不能发送表单格式的数据）：

图五

好的，在排除了不对的方法之后，我们想象，要怎样修改提交方式。还是按照之前的办法，发起Ajax post请求如何？

        $.post('http://api-breakingnews-web.itheima.net/api/login', {
            username: $('#form_login [name=username]').val(),
            password: $('#form_login [name=password]').val()
        }, function (res) {
            if (res.status !== 0) {
                console.log(res.status)
                return layer.msg(res.message)
            } layer.msg('登录成功')
            location.href = '/index.html'
        }
        )

图六修改后的提交方式

而不是原来文件中的$.ajax方式。最终成功实现了正常的功能。