25、尚硅谷_SSM高级整合_新增_Ajax校验用户名是否重复.avi原创

好，那么接下来呢，我们就做新增功能里边咱们这个啊，员工姓名的重复性检查，那么这个校验呢，哎，我们应该是把我们这个员工姓名输完以后，我们就去给服务器发送一个HS请求，服务器来告知我们这个用户名是否可用，如果可用了，来我们点保存可以继续保存，如果不可用，错误信息在这提示用户名不可用，我们不能进行保存好。所以说呢，我们来把这个功能完善，相当于给咱们这个员工姓名的这一栏，我们可以绑定一个称职事件，这个称职事件呢，就是当我们员工姓名的这个输入框内容改变以后，哎，我们就去呃做一些事情，那么来我们的这个代码里边，我们来写它。员工姓名的输入框，员工姓名的输入框呢？我们来往上看，就是这employee name and。

Input就是他在我们前边这个呃，表单中。的，咱们这个元素好，如果他绑时间。我们写在最后边，好，这个员工保存呢，也就是说不能啊，只做一个壳校验，所以说呢，我们在这应该。给他。绑定一个世界。我来编写一下，给咱们这个员工姓名的输入框绑一个时间，就把咱们这个称职时间，当它里边的文本内容发生改变以后，我们应该去，哎，发送A请求。校验咱们这用户名是否可用。是否可用，所以说呢，我们应该这么来做，那么这一块呢，就是我们这个校验用户名是否可用的行，我们呢，来到我们employee里边，我们来假设编写一个能检验用户名是否可用的方法。

好，还是返回message对象，我们就叫check user。入我们这个用户名，我们要的这个用户名。啊，我们员工姓名就叫name，好，返回，我们先来return。那么呢？我们要处理的请求就是check user请求。Check。User，好，我们来处理这个请求啊，这个方法也叫check user，那么呢，假设就有我们这个employee里边就有一个检查用户名的方法，Check咱们这个user的方法，这个方法呢，把我们这个员工姓名传过去，他能把我们返回布尔值出货，False。

当然没有这个方法，我们来创建。创建咱们这个方法好这块呢，这个方法就是检验。用户名。是否？可用，就是咱们这个员工名是否可用这个检验呢？我们来调哪个方法好了，我们employee member里边，哎，它有一个咱们这个COUNT8EXAMPLE，就是按照条件统计我们符合条件的这个记录数，那么呢，我们调用这个方法，也就是说我们按照名字等于我们给定的值去看我们数据库里边有没有这条记录，如果有就会返回大于零的这个，呃，数字如果没有，那么就等于零，好，我们的这个查询条件，我们给它构造出来。这个查询条件呢，就是employee example啊，Example来一个employee。

Example对象，好，我们来创建查询条件example.cri criteria，哎，我们是这么创建的，然后呢，我们给criteria中我们来拼装我们要的条件点，我们的条件就是哎，并且咱们这个员工的名字EP name，哎，员工的名字必须等于我们给定的这个值。我们就来看这个员工有没有，如果有他这一块就会返回一个咱们这个记录数的这个浪形的count值，那么呢，我们就直接返回这个count等等零就行了，我们就来看这个反查到的这个记录数啊，大于零还是等于零，如果它是等于零啊，也就是会返回处处呢，就代表可用。返回，我们在这儿标志一下来，如果当前数据库没有这条记录，那么等等零就会返回处代表咱们这个当前姓名可用。

可用。否则呢，我们这个force就是代表不可用。好，我们来到我们这个controller控制器，那么这块呢，就会查询可用还是不可用，那么根据这个状态，我们可以给咱们这个客户端进行返回，如果是处可用，那么我们就直接return。Return一个咱们success代表呢，用户名可用，否则呢。哎，我们就可以返回一个。提示信息，第二咱们这个非哎，我们这个费的状态码呢是200 success呢是100，也就是说呢，我们客户端可以通过对状态码的识别，我们就知道用户名是否可用好返回咱们这个解送数据response。

来到我们这个页面，这个方法呢，就是检查用户名是否可用。可用。我们来到我们这个in页面，页面呢，我们监控，当我们这个input框内容发生变化以后，我们来发送请求，A，请求到点A，好，我们来发请求。URL请求地址，请求地址呢，就是我们当前项目。当前项目下，我们有一个方法叫咱们这个check user。好，然后呢，我们要携带的数据。就是呢，我们这个，哎员工姓名EP name好，因为我们这个controller里边要咱们这EP name的值，哎，它的这个变量名就是要从请求哎参数中取得值，或者呢，我们加上request注解，明确的告诉我们spring mvc要取出E的值。

好，那么这一块呢，我们带的EPM的值就是我们这个输入框，哎应该是this y6值，那么这个输入框的value值，所以说呢，这个是我们EMT name，我们把它的值哎提交给服务器，好，那么呢，Type，哎，比如呢，我们可以是post请求，哎随便，然后呢，我们success。哎，我们服务器给我们响应成功以后。哎，服务器呢，会有一个result，那么这个result呢，就会有两种状态，第一种状态呢，就是我们服务器给我们响应的用户名可用，这是一个success用户名不可用，就是一个file，所以说呢，我们在这里边儿，哎，在咱们这个in this页面，我们可以判断一下，如果说。

咱们这个返回的这个结果中，哎，我们返回的这个对象，因为我们返回的是这个对象，它里边的这个code的属性。哎，是100，那就代表成功了。如果是100等于100，那就代表成功。否则。啊，否则呢就是失败，那么成功的话呢，我们可以显示一个提示信息，哎，告诉你用户名可用行，那我们这个提示信息的显示我们抽取过来了。好放在这这个提示信息呢，我们就显示在咱们这个。哎，就是咱们这个这个元素，哎，我们传入的元素是它这个100呢，是成功啊success咱们是成功信息来，我们给它提示用户名可用。

可用，那么呢，否则我们就给它显示。失败。哎，咱们这个失败，我们叫，哎就叫用户名不可用，所以说呢，我们发一个as请求来进行校验，好我把服务器重启。重启以后呢，我们来到页面进行测试。我们来刷新。好，等他过来刷新以后呢，我们来点到末页，好，我点新增，我先来看一下张三行不行，张三。走诶用户名不可用，张三一走，用户名可用，这就行了，那么接下来呢，我们这个email啊，只要我们填对了，我们点保存就行，而如果我们这一块填错了，张三我们来填错了，然后呢，一麦我们来填对。这样呢，我们把这个问题来看一下啊，如果email我们来填对。

我点一个保存，你看还给保存上来了，为啥。哎，其实非常简单，因为我们在这用户名校验可用不可用，我们来看我们的代码只是在这显示了一下提示信息而已，并没有真正的把这个保存按钮的点击事件给禁用掉，所以说呢，我们来看啊，如果一旦我们这个用户名啊不可用了，比如呢，我们输一个张三一，这是可用的，再来输一个张三，一旦这个不可用了，这个保存你点就应该没效果，所以说呢，在咱们这个保存这一块，那先进行了一个前端校验，然后直接就发AJS请求保存了，而中间这一块我们应该。得知我们来判断之前的Ajax。

用户名校验。用户名校验是否成功了，如果成功了，如果成功了才往下继续走，不成功的话我们自然不走，所以说呢，我们可以把这次aja校验的信息，哎，我们保存起来，方便我们后来来用，那么这个保存呢，也非常简单啊，我们可以这么来做，比如这个保存按钮，如果我们这个校验成功了，我给保存按钮上。添加一个属性啊，这个属性呢，比如我们就叫Ajax。杠来，这个属性的值就是success，如果保存失败了，这个属性的值就是这，我们点保存按钮的时候，我们先拿出这个属性的值做一个判断，看能否保存，哎，所以说呢，我们做这个逻辑也是挺简单，当然大家也可以来写一个全局变量来存，那样呢看起来不优雅，好我们接下来呢，我们来就给这个保存按钮，我们来自定义一些属性，好，如果咱们这个成功了，我拿到这个保存按钮，好，这是员工保存的这个按钮。

我给这个按钮啊，给一个自定义的属性。比如呢，我们就叫Ajax的好ajav，它的这个数据校验，它的校验的状态就是success，如果保存失败了。哎，我们给这个啊保存按钮，我们的校验状态就是这失败或者呢，这个L我们都统一一下失败都叫L好，那么呢，我们在这一块判断的时候，哎，发AX请求之前，我们应该继续拿到当前按钮的这个aja属性，我们进行判断，所以说呢，哎，我们来看啊，拿到当前按钮。当前按钮就是我们这个this对象，我们拿到它的at tr啊，我们刚才自定义的这个属性的值，我们来判断它这个属性值。

来是成功还是失败来判断它，它如果是失败，那么我们也直接return，而不进行下边的操作。好，我们的代码这来写，我们来测试一下，重新刷新，好，重新刷新，我们来点击新增。好，点击新增我们来看啊，我写一个张三好用户名校验失败了，这次我直接写一个对的email，我点保存，哎，我们来看并不能保存，并不能保存的根本原因是我们来看点击保存的时候保存的这个状态，哎，已经被置为error了，当我们写完一个张三一的时候，哎，校验用户名可用了，这一块被置为success，我们再次点击保存，哎。

状态判断成功，我们就可以保存成功。但是呢，咱们这儿应该还有一个问题，估计大家刚才已经想到了，我们刚才这个张三保存成功了，因为我们使用的是AJS页面没刷新，我再点新增。那么呢，这些状态就是刚才校验的状态，是成功状态，我现在呢，什么都不变，我直接点保存走，你看又一个张三一成功了，原因是什么呢？当我们点新增的时候，那么这些数据已经是校验成功的，这一块都是成功的，我再点保存，不会有aja X发送请求了，而我们这个AJ呢，是在文本框内容变的时候，这是之前的数据，我们来跳来跳去，这里边的内容不变，所以说呢，我们AJS相当于又失效了，那这个怎么处理呢？哎，也非常简单，我们每次点新增的时候，哎，弹出这个对话框，我们最好不要让它保存上一次的这个数据，防止我们这个呢，有一些这个校验调过，或者大家做一个更细节的，就是说呢，啊，把这个我们这个员工名字，我们每次。

呢，就应该是变一下，那这样的话呢，我们做一个简单的，每次点新增弹出对话框，我把这个表单里的内容数据全部重置一下就行，重新都得填，那这样的话呢，你每一个验证都得再来走，那我们就来修改这段代码新增，点击新增弹出我们这个对话框，好，这是点击新增按钮弹出模态框的，模态框弹出，哎，之前我们都是清除咱们这个表单数据。啊，其实这个清除就是表单重置嘛。表单重置，老师说呢，我们来这么来做，那么这个表单要重置呢，我们找到这个表单，这个表单井号，哎，就是我们员工添加这个模特框里边的这个form表单也只有一个，它让他重置，因为杰克瑞没有这个reet方法啊，而我这个方法是我们do对象的，所以说呢，我们来取出，哎，咱们这个do对象调用reset方法把表单重置，然后呢，我们再来测试，我重新刷新，好，我们来先新增一个员工，哎，我们叫李四。

李四，然后呢，我们来写一个，哎，这是用户名可用的AAA啊at qq.com好，我们来选一个测试部，我点保存，保存成功了，我再要点新增，就不会是咱们这个之前我们这个已经校验的这些东西，我再来点保存，那么这些数据都要重新进行校验，所以说呢，哎，我们这一块呢，来一个校验，好这个校验成功的可以用的，哎，我们再点保存，但是这个前端又不能过，所以说呢，整个校验还是可以使用的，那这样的话呢。

我们完整的前端校验就做完了。