时间戳

首页 > 解决方案 > 每次用户输入用户名时发送 Ajax 请求以检查用户名的可用性。这种方法有什么缺点？

javascript - 每次用户输入用户名时发送 Ajax 请求以检查用户名的可用性。这种方法有什么缺点？

问题描述

我正在制作一个 NodeJS 身份验证应用程序。

情况：用户输入用户名，如果用户名被占用，它将显示“用户名被占用”，否则它将显示“用户名可用”

我想知道我在下面实现的方法的缺点：

用户名输入栏

<input type="text" name="userName" placeholder="Username" required="" onkeyup="checkUsername(this.value)">

所以每次用户输入一个字母时，都会调用 checkUsername() 函数！

检查用户名函数

        function checkUsername(data){
            $( document ).ready(function(){

                
            $.ajax({
                url: '/register/checkUsername',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({user_name:data}),
                success: function(new_data) {
                    if(new_data == 'available'){
                        //By Default the messages are hidden!
                        document.getElementsByClassName('user-name-taken')[0].style.display = 'none'
                        document.getElementsByClassName('user-name-available')[0].style.display = 'block'
                    } else  {
                        document.getElementsByClassName('user-name-available')[0].style.display = 'none'
                        document.getElementsByClassName('user-name-taken')[0].style.display = 'block'
                    }
                }
            })

            })
            
        }

'/register/checkUsername' 路由器

async (req,res)=>{
        var username = await userModel.findOne({userName:req.body.user_name})
        if(!username) {
            res.send('available')
        } else {
            res.send('none')
        }

    }

这会使网络应用程序变慢吗？还有其他缺点吗？

标签： javascriptnode.jsajaxexpressmongoose

解决方案

当前的方法不是最好的，当您从性能的角度进行讨论时，或者当您考虑扩展时，API 命中的数量会呈指数级增长（它适用于较小规模的项目）。

PS：虽然从用户体验的角度来看，这很棒。

更好的方法1

完成输入后，提供一个按钮以检查用户名的可用性。

PS：不是最好的用户体验。

更好的方法2

为了实现两全其美，您可以等待用户输入最少字符数（可能是 4 或 5 个），然后在输入的每个字符上开始调用 API，因为用户名不会少于 4 -5 个字符并以该长度检查不是一个好主意。除此之外，它也很有意义并且提供了出色的用户体验。

最后，可以有很多其他的方法来解决它，这是根据我的观点。随时发表评论并为其添加更多积分。

推荐阅读