javaweb项目实战 19使用AJAX异步验证用户唯一和验证码是否正确 学习猿地原创

大家好，上节课呢，我们用JS在前端页面对单个表单进行了一些验证，但是我们还没有做完，哪没有做完呢？比如说用户名不能为空，我们验证了，但是用户名的唯一性，也就往数据库存的时候，如果已经有这个记录了，我们是不能够再注册这个用户了，那这个时候我们就要用到异步处理的方式，也就是用艾克斯来进行验证，不光这个用异步来处理，你比如验证码，那我们只是验证，不能维护验证码输入正不正确，那我们也需要使用异步的方式去处理。那我们来看一下如何用阿贾克斯进行一个呃验证，那用阿贾克斯验证呢，我们也给前后端的一个这样的一个配合，所以呢，我们呃流程上。需要使用，给他画图吧。比如说这是我们的前端用户界面，那前端用户界面我们在界面不刷新的时候，就无刷新的验证，当焦点一离开的时候，输入用户名，我们呢，需要到so里边，需要到一个so里边，那比如说这个so我们就叫做。

啊。用户名检查。Username啊。呃，EK用户名检查到这个sol里边去查找这个sol里边呢，它接收到你通过阿贾克斯，也就是在客户端表单里边交的也通过阿贾克斯。去检查，那到这个里边接收到阿贾克斯请求过来的一个参数，然后我们需要到数据库里面将。到我们的那个user do里边将什么将数据取出来，取出来之后查找一下，如果查到这个用户了，那我们。从这块查查没查着这块都有一个标志位返回，比如说返回真和假，他这会不是返回输出，输出真和假，贾克斯呢，然后把数据返回的不是返回给整个浏览器，而是返回给阿贾克斯，阿贾克斯拿到返回的这个数据，比如说这个字符串真和假，然后去判断，如果是真我们怎么办，如果是假怎么办，大概是一个这样的一个流程，所以呢，我们需要写S，还需要写数据库查询，需要写这么几步的这个操作。

那假如说我们先一段一段写，我们先写阿贾克斯的一段。你比如说在这里边用户名，如果它等于空是这样，那否则就是不等于空位对不对，如果不等于空的时候，那我们就用呃阿贾克斯来请求，用get请求就行，到浮点盖用解二这个比较方便啊，阿贾克斯几个参数就行，请求哪呢？请求的ul位置，然后请求完了之后，如果呼器有响应。我们就把想要的数据就会给到date，就会执行date这个方法，看好了这个参数啊。使用阿贾克斯。盖的方法去请求这个位置，请求这个位置，如果请求这个，呃，Sol有返回，会执行这个函数。把返回的数据给那我们。假设先做一个模拟，做一个U。

啊，比如说请求哪呢？请求我们就叫做用户，呃名字CECK，用户检查请求这个位置，请求这个位置传什么呢？传名字，把名字传过去，这个名字呢，呃，我们最好是使用JS那个，呃，Inco ul这个编码一下，不然的话有一些中文呢，我们会出错，所以呢，我们编码下Co URL。Right。转码一下这个名字，这个名字在哪呢？Obj找到我们这个表单对象，然后我们点击这个表单，Obj的表单嘛，表单的VL这个值就是我们要传给服务器的这个用户名，用户输入的用户名传给他。那传给他之后，呃，我们这块不能写引号里边。放在这用户名加上这个。这样的话把名字就传过去了，传上去之后呢，我们最好再加一个防止请求一个地址，它有缓存，不是每次都查询，所以呢，想要地址变化，我们一定要加一个什么。

加个时间或者是呃，随机数time就行，这样的话我们就可以请求服务器的这个位置，用get请求到服务器，传到这个位置，那如果返回的数据，比如说我们服务器返回。呃，也服务器输出的，假如说是两个字符串成功有这个数据，我们就是呃帧对吧，呃。有的数据，比如说我们是假吧，告诉他用户什么，呃，传传假说明这个用户你不能使用啊，传真T就告诉你这个用户可以使用，比如说date这个自串，就等于这个真和假，所以我们就判断一下。如果电线它等于。甲，那说明这个用户不能使用对不对，那我们就用S把这个消息盒子有S里边的啊。转过来告诉他用户名啊。

不能。不能使用这个就告诉他已经存在了，当然你提示什么，你自己随意对吧，嗯，然后呢。否则。否则那我们就是干嘛，我们是清空这个。执行一下类似于呃，清空的清空的一句，那我们把这消息盒子MSG消息盒子里边的HTM内容干嘛。设成空啊，不写是为空啊，然后呢，删除plus。删除我们的那个类。当然了，你可以在这块再换加一个别的类，告诉他用户名可以使用，做一个提示啊，每次都做一个提示，那你可以想怎么写怎么写，你就不用删除类，比如再加一个新的类，SUSES，成功的类，对吧，然后这里边加上，呃，你可以继续使用，再去编写一下，都是可以的。咱们的就是什么也不提示，就是可以用咱们做这种呃方式，这样的话，我们这个阿贾克斯请求就可以了，以会有错误咱们就调整，没有错误咱们就怎么用，那请求到哪呢？请求到这个S，那我们需要新建一个呃用户检查的这个呃S。

但然这在前端检查，不用在后端验证啊，我这块呢，就不加那个manager和I那个下划线了啊，我直接创建一个这样的一个一个类，用户名检查的这样的一个类，当然也在这用户收类下面新建一个。在哪个包下边无所谓，新建一个。然后我们这个类名就叫做user用户名K用户名检查的这样的一类。当然我们这块是用钙的方法提交进来的，所以呢，其他的啊，我们都把它去掉。啊，那同样这里边跟其他的呃，比如说用户添加呀，或者什么都是类似的方法，肯定得先设置什么，设置字符集获取参数这几个无定，像我就直接呃把它粘过来，当然我们传的名字传的是name，不是username。

选的是把这个给改过来。啊，传递了用户名，那传到用户名呢，那我们得需要什么，我们得需要到服务器里边。到D，嗯，Do里边去查找，那我们通过LLKY里边的，呃。Usdo这个里边我们里边会做一个方法，当然现在还没有啊，比如说select查询。拜命，把用户名往里传。一会我再去把这话。通过用户名去查询，那查询到了之后返回来的就是肯定是查询的个数。晶体对吧，如果大于零的话，那我们就是比如说。

如果查到这个数据问题。大于零说明。呃，说明我们是查到了这个数据，查到数据我们输出假，否则的话我们输出帧，当然了，我们用输出的话，肯定得获取这个输出流白钮PI，呃，RI，比如说out，等于通过响应对象里边re。Re。啊。我。一个导入的L。嗯。这个错误是因为我们，呃，现在没有这个方法对吧。然后我这里边就out，第二打印，打印谁呢。一个字叫做甲。要告诉他不能使用。因为我们查到了。否则我们。

打印。比如说true，但是你输出什么字符串都是可以的，你只要那边能判断就可以了，然后把这个流关闭掉，U2了有流创建就要把流给关闭掉。那我们再到这个类里边，我们把这个方法也做完了。我们找到呃，User DAO。这个方法里边我们看一下跟哪个方法比较像。嗯。我去。喂。ID是查到一个用户，我们只要查到这个数量就可以。那我们用。呃，这个方法吧。整体一下。我们找位置。嗯，改改个名字，当然我们传的只是一个数量。

变成查找，呃，By name，那我们直接传的就是一个。用户的ID就行。I。谢谢，不需要了。然后同样连接对象这些东西对吧，执行这判断就不需要了。查询从用户表里边儿条件什么呢。呃，条件就得是用户的ID了，不是用户名了。用户ID对吧？UID等于问号。等于号。查询这个数据，然后执行呃，SQ语句，执行语句，但是呢，我们得把这个ID。

你穿过来。这个ID就是我们上面这个ID。然后直行。最后一句，就这么几步，我们就可以，然后。循环里边。得到第一项，其他的就不需要了，那我们得到哪一项呢？我们在这块返回一个数量，升第一个。等于一啊，等于零。默认值那等于零了，然后我们这块从里边获取一个数几。返回。西游记。好，很简单的一个什么，通过查询这个用户名存不存在，如果存在的话，就把这个数量给我们返回去，如果返回的是零，就证明没查到，没查到回到我们。用户检查的话，没查到它数量就是零数量，零数是真，查到就是假，那我们看一下数据库里边有什么样的记录。

有这么多了，比如说爱密就是一个对不对，HELLO3HELLO2李四这些都是，那我们就来实验室一下点。比如说我这里边空可以验证aaaa，比如说随便一个用户表里边没有AA是没有提示，但是我输入I密ADMN，因为用表里边有这个提示。那就是有错误，我们看一下应该重，因为写了重新运行一下。好，我们在这看一下终端这块有没有一些错误清楚。我们刷新一下。输入的。没有错误，那就是我们的哪个位置写错了，我们一点点排查一下吧。

应该我们写代码的习惯是写一点查找一点啊。而不是说像刚才咱们写的顺序，把所有东西都写完去查找，首先呢，我们看一下阿贾克斯这块有没有问题。点首先我们看一下他的地址对不对。User这个地址应该我们有单。用户检查正好就给改用户检查。保存。把这边有。刷新。还得一点点学上下。用户用户名检查。捋一下这个流程。弹出一下。

UR看URL我们输入的对不对。爱你。这个GS这个位置有问题。我们。升到一点点的，大家看啊。其他地方没有问题。嗯。是不是一个符号，因为我这个总是。我们有弹珠。UR声明。不是在这。弹出一下。这个可以了，应该是上面的字符串有问题，我们在接着排查一下。嗯。

VURL。哦。Username。这个是没问题的，然后问号名字等于。In code uri。Right。然后呢，从obj里边把规度值取出来转码，然后加上一个呃，安德符，临近安德符，然后new date，呃，DA下边的。PA。没问题出来ul。加号，加号，加号。这都没问题，再试一下。这可以，什么都没改就可以，刚怎么可以？用户名第后边是一个随机的时间，不是随机，是在当前的时间。

由最后再执行下。嗯。这没问题，然后我们看一下回来的数据。业界。返回的。挽回的是真，那就证明。把这个删掉是没问题的，这用是可以用返回一个。那么还是这用户里边应该有爱这个数据，那我们就是查找数据这块有问题了。应该是返回甲排队。用户检查。聊到名字。一会我打印下。

P。直接打的白马。啊，直接。out.PT把一下这个西引擎。是零，证明我们没查出来，那我们带到数据库里边。现在定位到这个数据是零了，是零没有查出来，没有查出来。嗯。没有查出来，那就是这块的问题。那我们再到。用户。这位置intt等于零，连接数据库查询从右户表Y条件UID等于I的密。这是1.1米，直接做一准执行，然后从里边会有第一点吸。这没问题啊，查询从这个表里边用户ID，你试一下。

From。I own it。User for条件user ID。交线ID等于I。应该是。有错不存在啊。这是我们。Are on allum PE ws。是可以查到的。没有错过。爱的用户。看一下。给Co。返回原这几个也没有出错。得到里边的，呃，第一项。得到里边第一项。

找一下啊。这个参数选错了。他肯定查询的不是爱来最，我们试下。爱你。哦，一这对吧。好，我们再继续把代码。欢迎一下。这就不需要了。等于甲，然后我们在用户检查这块，输出这块也不需要了。我们最后再来试一下。爱。我这边已经去掉了啊，那边等待一下啊。确认一下。

苗可以使用，但我们这怎么还有一个弹出呢。我把那给删掉了，应该是保存没关系，等一会儿就可以了。然后除了这一块，我们还有这个验证码，那验证码我们写起来就比较呃容易了，因为他不需要到数据库去查询，直接我们在这个里面预算，当然了也得请求一个呃服务器，对吧，你看如果验证码呃功能为空，那我们在这块也写一个。否则。呃，同样我们做一个UR。呃，这回是我们到请求检查用户的这个码，CK检查用户码问号，呃，Nu nu m码等于加上我们还是用en CU nuri，我们去，呃，转一下码。

报福啊。那个应该是转码直接传过来的啊。用户。否则如果等于空，然后我们。码码把这个纸。嗯。转下这个值，我们应该先收一下。这直接。Obj反过来的，第二，呃，Val第二。好的转码。转码完之后，呃，我们加上。个随机数。电梯。加上。跟上面的一样，只不过我们换了一个什么，换了一个这个请求的地址，然后同样如果。呃，如果。这就不用判断了，直接导入点get。Ul请求这个位置，然后。

那这里边的变量你自己随便声明，比如说我们就叫做nu啊，Nu比如说BAT传回来的数据，然后我们在这里边判断，如果传过来的BAT啊，等于也是一样，FA等于假，那么我们在这里边怎么处理，否则等于真，我们怎么处理，如果等于假的话，那我们就输入，让这个验证码输入有误。这块。我们就验证码输入。输入不对。或者是有。就可以了，然后重新把这个，呃，设置成这个钥匙，那如果是正确的，如果是正确的，那么我们就怎么样，我们就直接将它的。里边的。呃，样式先将他的里边的H。

给清除掉。写不写都行，然后呢，呃，删除样式。Apple we eat class。那个ER这个错误的样式就可以了，那这里边同样我们得写一个。啊。这个我们也在这个用户里下边去新建一个。叫做。用检查e CK user user UN。然后把这个地址。刚才咱们那个就帮你换了。这些都不需要。我们只需要在这个里面，我们把。呃，继续汇就行了，比如说我们先获取到这个参数，这个数字。它是一个中号的。A等于通过。Request里边get参数获取到哪个呢？就是um传过来的这个参数，获取这个参数之后，我们需要呃，在30里边看一下我们。

在添加三审的时候。不是在这个位置。你看我们已经在三里边。过去这个session已经在session里边设置了code，我们就跟这个用户的那个COD进行对比一下。在这块首先呢，我们需要的是获取这个。名字得改啊，得通过。呃，请求对象里边。获取这个赛，获取赛之后，我们需要从赛身里边获取这个码，也就是。30里边呃，有个get att2通过哪里呢？获取哪个呢？咱们存储的叫COD，获取这个COD这值，然后把它转成。但是你对象转成字画。

生命一个字符串，比如说叫做啊sys COD。等于这个字串，这样从30里获取字串出来，这是我们常规的字串，这是从30里面获取字符串，服务器端生成验证码，直接保存在服务器端30里的这个字符串，然后我们就判断一下。如果。里边的这个字符串。等于。我们呢，传过来的，呃，这个nu，那么我们就让它输出。否则是不是假，否则是是真，那我们首先还是得。把这个。过来吧。代码。

看一下过去打印流，如果这俩相等的话，我们就，呃，应该是输出针。相等的话。说出这。是。T是一样的，如果不相等的话，我们输出价括号B写错了。同样我们在这会我们来看一下。如果呃，验证码等于假的话，我们说验证码有误等于真的话，我们就做处理好，我们就会再刷新一下。来试一下这个好不好。用爱。啊，用户名不能使用，I用户名不能使用。这个用可以使用对不对，验证码看不清，换一张你看我们输入随便输入几个。错误。啊，看错了吧M。M3QK。来看一下是哪块又错了。

UR，我们再参一下。刚才就是上面的ul。还是这里边GS有问题没执行到，看一下啊有没有问题。找到下一个，下一个的对象不能为空。我要掉。你看一下哪个位置出错，这太。还出现同样的问题没有出来。是不是哪个字符编码又写错了？可以。还是我们这个字符串写这个问题。

重新。将上面那个复制过来，他们两个是一样的。只要我们把。对。拿过来。其他的都是一样的。OB角。Video。拦住。不行。好，这个没问题了，那我们再把下面打开。把这个去掉。在这块弹出一下。Nut。我们服务器。

这法有到点盖。不行。Nub括号。方法。没有。帮我重写一下这个方法。包点get请求。URL请求这个位置，然后呢，Action返回一个it数据大括号，把它敲开，我们直接先弹出一个链接，先看一下这块有没有问题。还是？随便输几个字符。没执行到这，我这会就弹出一个啊，弹出一个U22。没有问题。

随便几个。二没问题。那幺二没问题呢，没有返回来，那我们再看看服务器端这个方法里边有没有问题，检查用户。这里边儿我们。嗯，打印一下这个验证码。比较。一下SYD。再加上。行。几号几号，再加上nu。我们看一下这两个。能买出来。刷新一下，请求一下，不管正确错误，他都会请求一下。没有执行到这个方法没有打印到吗？我们。运行一下。

好。我们再执行一下。刷新一下。会长，可以了。那。是这个服务器没有运行启动。一个是2PG，一个是我们这块啊，我们把这条删掉。返回甲，返回甲，我们在用户这块。就可以。继续往下去，下来，如果。这块啊。把这个去掉。这块去掉，那我们这块一样去判断，如果bata里边的它等于。F甲，那么我们怎么办？我们告诉他。验证码输入。刚才应该就是望重启服务器了，导致因为阿贾克斯是多，它是异步处理的，所以浏览器馈那么直接有有反馈，所以我们是呃看不到的，否则如果等于帧的话。

那么我们直接要用nu show，呃，点TML，用它等于空点plus。我们，呃。删除。嗯，E。我们刷新点。好，先随便输入一个。验证码输入有误，那我输入一个是05P。Woman。Cbf。这是另外人物。验证法怎么输入啊。来对比一下。在这打一下这个。重新再编一下。X。八。

我们看一下输入的值。X8G6X8G6。应该没问题的，如果输入这个码。ES等于O6。总加一号。等于这个就可以了。刚才咱们错误也是因为，呃，对比的参数都是把内部进去了，诶算进去了，比较的是这个。来，我们看一下。代码。请。嗯。四。好就没问题了，对不对，再多输一个读对吧，同样我再试一下。用户名不能使用好，这样的话，我们就阿贾克斯完成了用户唯一性的一个异步验证和验证码一步验证，那这个时候我们前端注册和阿贾克斯一步注册就完成了吗？还没有完成，如果我现在虽然有问题，但是一点注册还能提交过去，所以呢，我们下一步要整体的一。