18_尚硅谷_书城项目_通过发送Ajax请求验证用户名是否可用

昨天我们实现了登录注册，呃，我们再来看一下啊，嗯，看一下这个注册，现在呢，给我来输一个密。来一个密码。好诶，我来点一下注册，诶那这个时候呢，告诉我用户名也存在，但是啊，我们这个比如平时上网的时候，好像这个，诶输入这个用户名之后，是不是就直接就告诉我用户名也存在或者是可用，对吧？所以啊，我们说这个体验呢，不是很好，你输入内容之后呢，点注册诶他才告诉我这个用户名一直存在，而且呢，这个我们现在这个表单啊，内容比较少，那假设你这个注册的时候呢，里边填的信息比较多，什么用户名啊，密码，邮箱啊，或者你手机号等等好多信息，那如果要这样的话，点一下注册，诶告诉你用户名存在，它会刷新整个页面，是不是之前输入的内容都清空了，对吧，还得重新再来一次，那我们就说呢，诶这个体验不是很好，那你这个在我提交就点注册之前，能不能告诉我这个用户名已存在呢？这个也是可以的啊，就是用我们这个AJS就可以实现，我们之前也讲那个AJS了，就是我发一个异步请求，哎，不让他刷新整个页面，哎，就可以告诉我这个用户名。

到底可不可以用，所以啊，下面呢，我们就把这个呢，来用一下这个Ajax，那我用Ajax的话，这块我是不是输入这个内容之后，需要让他给我发一个请求，对吧，发一个A加请求，那需要给他。绑定一个什么事件呢。我输入内容，哎比如呢，哎，我输入了一个密，哎比如呢，我这个把鼠标哎放到这个输入用户密码这块了，那我这个接下来呢，干其他的事情呢，不影响一步请求嘛，你发一个请求之后呢，不需要等到他现场成功，你就可以干其他的事情，就可以再发其他的请求了，那我这个输入密码时就让他发这个请求，也就是说是不是让他带着我们这个用户用户名来发这个请求，对吧？发这个请求我就需要给他绑定一个事件，绑定一个什么事件呢。

把那个change你事件对，哎这个里边这个内容，哎，改变的一个事件啊，改变一个事件，那这个我们来看一下啊，因为我们这个，呃，之前呢，这些都是用的这个这块，我们把这个页面呢给打开。把这个注册页面打开，上面呢也用这个解块了，所以呢，我们就来用这个解块呢，来发一个这个异步请求，就发一个A价请求，那我们来打开我们的解块的API点开了啊关于aja呢，诶在这一块这个AJ请求，这个dollar.aj一个Dollar符呢，就相当于我们那个j query，那这个呢，就属于这个底层AJ的一个实现了，那这里边你这个第一个URL，也就是你发的这个请求的地址是必须有的，就是必须的后边的settings呢，哎，这个是可选的，也就说前面这个啊，你要发业务请求呢，哎，地址是必须的，后边这个settings里边呢，它也有好多信息啊，好多信息。

就是好多属性，你包括什么呢？接受access包括什么？Before send，这个发之前要干什么，还有一个异步的，这个默认的，就是默认就发一个异步请求，如果你要不想发一不请求呢，就把它改成false就可以了。好了，下边的好多啊，下边的像contents啊，包括这个content啊，还有这个data，这个data呢，就是你发的那个请求参数了啊，现在请求参数什么u name等于什么，Passor等于什么，然有后把的什么data t，你这个想要数据的类型AJX那块，诶这个你可以想象那个串格式的，或者这个text字符串的，或者是接送格式的，就用那个data type来进行制定，然后下边还有挨着，如果要出现错的，出错的话，这里边整一个回调函数，一个函数出错的话，执行那个函数，这里边有好多内容啊。还有就是我们这个，呃，常用的几个呢，就上面这个，就是这个呃，Data，你发送的一个数据，还有这个data，你设置这个响应的一个数据的一个格式，包括这个我们后边还有一个这个。

然后我们找啊success这个想要成功啊，成功之后呢，你需要干一点什么事呢，也是一个回调函数啊，也是一个函数，在这个函数里边来执行啊，来执行这个内容，这是这个，呃，属于还有一个type啊，Type就是指定这个请求方式的，你一个这个呃，你发是一个get请求的默认就是get，如果不指定默认就是get请求，如果想发一个post，就就是就是把这个time呢指定一下post就可以了，这个呢dollar.aja呢，是属于这个aja一个底层的一个实现，诶这个这块呢，也给我们提供了两种简单的方式，发A，这个简单方式我们也来看一下啊，在这块呢，有个dollar.get还有一个dollar.post download get呢，它就发一个get请求，这里边这个参数就比较的简洁了，URL同样啊，URL是必须的。也就是你发请求呢，这个必须要有，有了之后呢，就可以发请求了，只是呢，后台，比如给你的想象之后，这块没办法处理啊，你这个URL是必须的，后边这个data啊，Call back，还有tap呢，是可选的data，就是你这个，呃，发请求呢，可以携带这个参数，比如我们刚刚那一块，我输入用户名之后呢，我需要把用户名给传过去，那需要就用到这个请求参数嘛，就是一个data啊，就可以转过去了，后边个call back就是一个回调函数嘛。

你这个如果响应过来了，响应过来之后呢，你要处理这个，你要对这个页面上哪些数据进行处理啊，你要局部刷新嘛，局部更新内容，所以呢，就在这个函数里边来写代码执行就可以了，最后一个type就是想要那个数据的一个类型了，什么叉MLHTML啊，杰森啊等等啊，还有text怎么说等等啊，类似的，这是一个get，到了点get，也就是它会发一个get请求，那同样我们来点上一步这块呢，还有一个dollar.post里边的参数是一样的。发一个post请求，发一个post请求，其他都都是一样啊，用法也一样，只是呢，这个请求的方式不一样，就是给我们提供了两种这个简洁的方式啊，而且呢，还有一个叫Dollar get杰son，它呢发送呢也是一个get请求，只是呢，你看它里边少了一个参数，少了个什么呀，对吧。

看少那个显要数据的类型，那这个呢，它只接收这个显要数据是阶层格式的，哎这个后边呢，默认就是它你不不用指定了，诶也没有给你提供这种这个指定这个类型的一个方式啊，你看这里边就三个参数，前三个跟我们这个Dollar get呀，和Dollar post是一样的，哎，只是少了后边这个time想要数的类型，那个getson它是想应这个，哎，接收这个杰son是一个显象数据，而且在你发的是一个get请求，那当然了，现在这里边呢，你用Dollar a也行，到post post也行，Get都可以来发这个求，那么就选一个就行啊啊这里边这些参数也很简单啊，URL啊，Data啊，哎，这个data就是你发送的这个请求参数啊，后边这个回调函数就想成功之后呢，我们要执行那个函数have，就是想要属这个类型，那这个默认啊，默认都是那个text，就是你想一个字符串就可以了，你也可以指定比个XML啊，包括Jason都可以，好，那现在呢啊，我们就用这个dollar.dollar.post就用它或者dollar.get都可以啊，用它来发一个请求，下边这块也有例子啊。

你就这块，嗯，如果你写一个do post啊，直接是text.php你就直接向这个text.php向这个这个页面里边发一个请求啊，向他发一个请求，哎，这是只串了一个参数，就是必须的这个URL，你必须得有后边的那个data，比如你想携带一些参数，有呢，这用一个通过一个杰森格式name什么John time什么，呃，下午两点你就可以把这个参数呢给传过去，在后台呢，我就可以来得到了啊，这后台就可以得到了，所以这一块啊。那好，那下面我们就来通过它来发一下这个异步请求。来啊，找到我们这个页面上面啊写着来，我们就写到最后面吧。嗯。发送这个Ajax请求。呢，这个验证用户名是否存在，好，那这个呢，我需要给这个输入用户名这个文本框，需要给它绑定一个事件，就是一个change制事件，Change制事件呢，诶这个说白了就是里边这个它的外路值，就它里边的内容改变的一个事件啊，改变的一个事件，我们先来给他绑定一下，我们来看一下这个用户名它的input呢，ID，诶username，好诶来往上翻，我们来给他绑定一个change置时间。

所以呢，来进行一个入释啊，给这一个哎。输入用户名的这个文本框。绑定。趁你时间到了，福。J username，第一个change。你们来一个方式。好，来alert一下啊，看看什么时候会触发它，哎，什么时候会触发它，好保存来回到我们这个页面来刷新一下。

刷新一下来，我们输一个奥密。诶，触发了这个事件，好，诶我们来改一下IN2，哎，也触发了这个事件，那好，那现在我问大家，我把这个DIN2删了，我再输一个DIN2会不会触发。对不会啊不会啊，结果它这个里边的这个值啊，改变的时候，嗯，这个虽然你之前是din啊，你把它删掉之后呢，又是的in啊，但是那最中的值啊，它还是的M2，所以呢，不会触发，哎，不会触发的啊。好哎，那现在呢，我们把这个沉机事件绑定成功了，绑定成功之后呢，由于呢，我要携带这个用户名来发这个AJ请求，所以呢，我得需要获取到这个用户名，所以啊，在这里边呢，我们来获取用户输入的这个用户名。获取用户。输入的这个用户名来word一个user name就等于Dollar符括号this this呢就是我们那个，呃，这个文本框，因为它是一个do对象，我要用解块里边的方法呢，需要把它包装成解块的对象，所以用一个do框啊，把这个do对象包一下就变成了这个解块对象，因为呢，Do只能调do的方法和属性，结块呢只能调结块的方法和属性，它两个之间不能互调，所以如果你要想调这个结块的方法呢，你必须得把它进行一个转换啊，把这个do呢转成一个结块，然后点一个v all获取里边这个Y流值，Y流值好诶，那下面呢，我们就可以来比设置这个请求的UR。

请求地址来word一个URL就等于有呢，哎，来斜杠，嗯找一个什么呢？Check user name好来就验证这个用户名啊，检测这个用户名好就发这样的一个呃请求地址啊请求地址好再往下我们需要这个设置什么呢？设置这个呃请求参数了，你这个发这个请求的呢，需要携带一个u name，所以呢，我们来设置这个请求参数，我一个我们就把这个放到外边了啊，你也可以直接用do.post或do.get调放还是写到里边，然我这个直接在在外面声明好之后呢，再传进去啊，这个怎么样都行啊。

P吧，就等于M打括号user name，冒号user name好。然后下面呢，我们来发送这个，发送这个A请求。咱们就用那个dollar.post吧，点一个post。好，诶括号这里边呢，我们来传一下这个URL，我们传一下这个，哎P我们先传一个URL啊，看这个请求呢，能不能发过去啊，能不能发过去，哎，这个触发这个change时间之后呢，看这个请求能不能发到这个，呃，Check your name这个呃。我们一会会写一个处理请求的一个处理器啊，那我们复制一下它，我们先把这个请求呢。来啊，我们这个在这来处理一下它。嗯。通过这个Ajax。

请求来验证这个用户名是否可用？HTTP点一个。I。Check user name check name，然后呢，我们在这来来controller这一个就叫这个check user name。好，我们在这里边呢，来写一个处理器函数。CTRLC。Check user name。找到我们的这个controller。好，哎，注册注册下面呢，嗯，我们这个。来啊，这个写一下。Check name这个。通过这个发送这个a Jack请求验证这个用户名。

好。WHTTP点一个response。RA。R。HTTP，点一个request。好。哎，那在这里边呢，我们要验证这个用户名，呃，是否可用这个，我们昨天呢，已经写了一个验证用户名的一个方法了，对吧，验证用户名的方法，所以呢，我们就可以用它了啊，可以用它了，我们在这呢，来先获取一下这个用户名，来获取这个。用户这个输入的这个用户名。怎么来获取user name？等于。R点一个。对吧。里边传一个username username好哎，就是把这个获取这个用户名啊，获取一下这个传过来这个用户名，好我们在这呢，我们先打印打印一下啊fmt第一个来。

嗯。传入的这个用户名是你们看能不能拿到啊。逗号有。同时呢，我们测一下我们这个请求能不能发过来啊，能不能发过来好啊，这个呢。我们这个通过到POS里边就传了一个URL，那这个U盾还拿不到啊，拿不到，我们就这个把这个给删掉吧，不这样了啊，我们直接随便打印一句话，看看这个请求能不能，哎，能不能发过来啊，能不能发过来。好，来。啊，没有用，那我还得把它输掉啊，因为们前台啊没有传啊没有传，所以呢，我这个就先测一下，看看通过do.pos的传一个URL，这个请求能不能发过来，我们一会再获取这个用户名啊，看能不能打印这句话。

来，CTRLC。慢点，Go。好，诶，来刷新一下。好啊，来输入一个in。来看一下。发过来了对吧？哎，请求发过来了啊，传入到用户模式已经打印了，这句话证明了这个请求了，哎，他能发过来啊，能发过来好，那下面呢，我们来继续啊，这个先CTRLC了啊。继续这个，呃，请求呢可以发过来，所以呢下面呢，我们在这块，哎，把这个呢用户名给他传过去，所以呢逗号来传第二个。属性，嗯，排。好，诶，就是这个这样的这个uz我就可以传过去，那传过去之后呢，诶，下边我们来写一个function。I is，哎，这个最终呢，想要那个数据，比如告诉我用户名可用啊还是不可用啊，就会以参数的形式呢，传到这个function里边了，回调函数啊，在这个回调函数里边呢，我们就可以对这个is就是响应的这个数据进行一个处理了。

好保存好啊，在这里边呢，我们先alert一下。Is，哎，看最终的一个想象数据是什么啊，先它一下，然后呢，我们再把这个消息呢，放到我们这个显示错误信息的这个四板标签里边就可以了，好啊，这个前面呃，这个呃，页面边内容我们写完了，那下面呢，还是我们这个handle里边这个方法验证用户名这个方法我们来继续写了，获取用户名。把它拿拿出来，那获取完用户名之后，下面是不是该校验了，对吧？校验我们上面上上上面这个啊注册注册这里边，哎是不是有一个方法就是check u nameme了，我们这个Du里边写好了对吧？哎，所以呢，我就可以直接调用到了啊里边传一个u nameme，哎来看一下这个user，来看一下user其实下边的代码是不是跟他一样的。纸里边需要稍微改一下啊，所以呢，我把这个直接直接拿过来了啊，不写了CTRLC。

CTRLV好诶拿过来把U传进去，然后呢，这个判断哎不用动，哎把这些呢，这个给删掉，因为呢，它是发的异步请求，所以呢这块啊不用要了。好，诶把这些删掉，删完之后呢，诶如果它大于零，那证明用户没有存在，那用户没有存在呢，我们这个昨天也说了，怎么来直接给他响应，直接用W点一个，是不是有一个方法叫write write对吧，那直接给他写一句话就可以了啊用户名什么用户名也存在，然后用户名可用，这个用户名可用，把这个就删了这个。啊，不用保存啊，不用保存，那这里边儿呢，我们这个里边是一个BA切片。好写一个什么呢？诶用户名已存在。好啊，用户名存在，那用户名可用这一块同样。CRZ。啊，这块，哎，用户也可用。

好，哎，用户名可用好啊，那这块呢，哎，直接这个给给前台响应了两个字符串，哎如果可用的话，哎，这这个用户名可用，如果不可用，那就是用户名存在好，那在这呢，我们在这个啊这个页面的话呢，我们先来alert啊，已经A过了啊，看看这个值呢，是不是它好，我们来重新build一下。好，来试一下啊。刷新。来一个保密。用户名存在好，哎，换一个十。诶用户名可用啊没问题对吧？哎可以诶但是现在呢，哎，这个我们说这样弹的有点不好，所以呢，下面我们我们这块是不是有一个专门显示消息的一个span，对吧？啊，我就可以把它设置到这个span里边，好，但是呢，这个SPA昨天我们处理的时候是不是把它给head了隐藏了对吧？那所以这个时候呢，啊，响应过来之后，我是不是得先把它给受一下。

哎，对吧，哎，先把它显示一下啊，先把它显示一下，所以呢，哎，来我自己写吧。在这里边干什么呢，哎。诶，将这个显示搜。信息的这个提示信息吧。那这个四班元素。四盘元素，哎，显示到了符。井。Message点一个收好，先把它显示出来，然后。然后我是不是将这个响应信息设置到这个死板元素里边。好，那怎么设置呢。叫一个什么呀。对吧。到了时。

括号井。点一个。Test。里边的res res，哎，把它设置进去好，诶这个改完之后呢，诶我们来试一下。刷新。来一个保密。诶，用户面存在好，哎，换一个呃面四。你视野存在了吗？五。好哎，用户名可用，用户名可用，但是现在啊，这个消息已经有了，但是这个用户名可用红色是不是。有点不好是吧。这个存在的话，你整个红色，然后可用呢，比如我想变个绿色，换个颜色怎么办呢。改什么？嗯。

加样式是吧，哎，加样式我也可以这样啊，我在后台呢，这块给它响应过来的时候呢，直接加加个它。好了啊，用户名已存在，用户名可用，那可用的时候呢，我这样。Front。Style。Color。Green，为什么我在这块没有直接写color啊？因为里边是不是有color。为什么没有直接写color，因为我们这个CS样式，你来到这设置的时候啊，你在这设置时候。设置到SPA里边之后，Class这块，这还有个样式呢。这还有个样式呢，你那块设置完之后呢，这个那个样式啊，起不了作用啊，在这块，因为我这个SPA呢，它也有个样式，在这个CS的样式表里边啊，样式表里边，所以你直接写放到这个，虽然呢这个呃，我们正常的来说啊，写个放标签之后呢，写个color那个字体呢，就变就设置的是你的颜色了，但是我们这个span它还有一个样式，还有个style啊，还有个样式，所以呢，我在这块直接写了一个style，不是还有个就近原则嘛，CSS对吧，所以啊，我这块呢，直接写的这个style，哎，我用我这个用我这个样式，但是如果你要这样写的话啊，这样写的话，你前端页面用text它是起不了作用的，我们来看一下CTRLC。

好来我们看一下啊刷新。来一个保密。90。你看它是它是解析不了那个标签的这个text的，它只能设置文本，所以呢，他把这前面的标签是不是也当文本给你处理了，对吧，那怎么办呢。所以这块啊，用到了另外一个方法，其实另外一个方法跟他的区别就是那个方法，它认识标签，它能帮你解析标签，你设置完样式什么，它能读懂，就是这个意思，Text它只能这个把你想想要过来的东西，不管有没有标签，都把它当成纯文本，好那另一个方法叫什么呢？叫HTML，也是在我们的最左边啊，最左边我们之前是不是看过这个VL对吧，它上面呢有个text，再往上有个HTML text跟attm，它俩的区别就是一个认识标签，一个不认识标签了，一个能解析标签，一个不能，比如这个呃，HTML你们来点开啊，你想啊下边你看它下边这个例子，设置所有这个P元素的内容，如果你要用text也能设置，但是这个B呢，它这个呃，加不了S是吧，诶直接还是hello，呃，什么监括号B，然后word，但是用HTML之后呢，诶这可能效果就不一样啊，他这块举的例子好像也一样，比如到入到时候P拿到所有都到了，然后给他设置里边的内容，如果要传HTML，那时候都到了里边的内容这个word。

可能跟哈这个字体的样式就不一样，但是如如果你要用这个text，呃如果要text，呃，那这个呃，即使这里边写那个标签呢，它也是正常的，给你显示出来那个标签不会变这个里边这个字体的样式啊好，那现在呢，我们把它改一下。

哎，不用HTML，不用这个text了。把它改成。HTML好，改成HTML之后呢再来看。刷新一下。来一个保的100。哎，这时候呢，哎，这时候的这个颜色啊就可以了，哎它都可以就可以读懂了啊，就可以读懂了，当然了啊，你们你们这个，哎讲了那个CSS对吧？哎讲了CSS讲了好多内容，这块呢，你也可以啊用这个比如给他添加CSS价值，嗯用其他的方式啊也也可以这个达到类似的一个效果，所以这块啊，你可以这个选择其他的方式，诶我这边呢，就用的这种方式啊后台呢，直接显过来的时候呢，带这个标签，然后呢，我们这个HTL来解析一下这个标签啊，显示这个指定的颜色就行了，我们再来看奥in，诶奥的in呢，就是红色，诶这个用户名也存在，就是红色用户名不存在时候呢，诶就是绿色，那你换其他颜色也可以啊，包括把它改成黑色，那都没问题啊，都没问题好啊，这是我们这个注册这一块，诶这个之前呢，我们是提交注册按钮才知道用户名可不可以用，现在诶我们通过AJ发个异步请求来过滤一下，就是输入用户名之后，就让他发这个请求来去数据库里边检测一下，因为我们现在是检测数据库的啊，通过我们。

从这个Du昨天写的那个方法，诶去检测一下数据库，诶如果这个呃不存在的话，这个那就这个呃，证明数据库里边没有这条，没有这条记录了啊好了啊，就是这个下面啊，你把这个呢，诶你把它给写一下，然后呢，我们说这个动作啊。