狂神说 javaweb 05集：Maven环境搭建

26.Ajax验证用户名体验

注册提示效果

我们再测试一个小Demo，思考一下我们平时注册时候，输入框后面的实时提示怎么做到的；如何优化

页面显示乱码问题：

applicationContext.xml

 <!--Json：乱码问题配置 -->
 <mvc:annotation-driven>
     <mvc:message-converters register-defaults="true">
         <bean class="org.springframework.http.converter.StringHttpMessageConverter">
             <constructor-arg value="UTF-8"/>
         </bean>
         <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
             <property name="objectMapper">
                 <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                     <property name="failOnEmptyBeans" value="false"/>
                 </bean>
             </property>
         </bean>
     </mvc:message-converters>
 </mvc:annotation-driven>

登录页面

login.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <html>
 <head>
     <title>Title</title>
     <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
     
     <script>
         function a1() {
             $.post({
                 url:"${pageContext.request.contextPath}/a3",
                 data:{"name":$("#name").val()},
                 success:function (data) {
                     if (data.toString() === 'ok'){
                         $("#userInfo").css("color","green");
                     }else {
                         $("#pwdInfo").css("color","red");
                     }
                     $("#userInfo").html(data);
 
                 }
             })
             
         }
         
         function a2() {
             $.post({
                 url:"${pageContext.request.contextPath}/a3",
                 data:{"pwd":$("#pwd").val()},
                 success:function (data) {
                     if (data.toString() === 'ok'){
                         $("#pwdInfo").css("color","green");
                     }else {
                         $("#pwdInfo").css("color","red");
                     }
                     $("#pwdInfo").html(data);
                 }
             })
             
         }
         
     </script>
 </head>
 <body>
 
 <P>
     用户名：<input type="text" id="name" onblur="a1()">
     <span id="userInfo"></span>
 </P>
 
 <P>
     密码：<input type="text" id="pwd" onblur="a2()">
     <span id="pwdInfo"></span>
 </P>
 </body>
 </html>

AjaxController.java

 @RequestMapping("/a3")
 public  String a3(String name,String pwd){
     String msg = "";
     if (name != null){
         //admin 这些数据在数据库中查
         if ("admin".equals( name )){
             msg = "ok";
         }else{
             msg = "用户名有误";
         }
     }
 
     if (pwd != null){
         //admin 这些数据在数据库中查
         if ("123456".equals( pwd )){
             msg = "ok";
         }else{
             msg = "密码有误";
         }
     }
     return msg;
 }

【记得处理json乱码问题】

测试一下效果，动态请求响应，局部刷新，就是如此！

获取baidu接口Demo

 <!DOCTYPE HTML>
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JSONP百度搜索</title>
    <style>
        #q{
            width: 500px;
            height: 30px;
            border:1px solid #ddd;
            line-height: 30px;
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            font-size: 14px;
       }
        #ul{
            width: 520px;
            list-style: none;
            margin: 0 auto;
            padding: 0;
            border:1px solid #ddd;
            margin-top: -1px;
            display: none;
       }
        #ul li{
            line-height: 30px;
            padding: 0 10px;
       }
        #ul li:hover{
            
            color: #fff;
       }
    </style>
    <script>
 
        // 2.步骤二
        // 定义demo函数 (分析接口、数据)
        function demo(data){
            var Ul = document.getElementById('ul');
            var html = '';
            // 如果搜索数据存在 把内容添加进去
            if (data.s.length) {
                // 隐藏掉的ul显示出来
                Ul.style.display = 'block';
                // 搜索到的数据循环追加到li里
                for(var i = 0;i<data.s.length;i++){
                    html += '<li>'+data.s[i]+'</li>';
               }
                // 循环的li写入ul
                Ul.innerHTML = html;
           }
       }
 
        // 1.步骤一
        window.onload = function(){
            // 获取输入框和ul
            var Q = document.getElementById('q');
            var Ul = document.getElementById('ul');
 
            // 事件鼠标抬起时候
            Q.onkeyup = function(){
                // 如果输入框不等于空
                if (this.value != '') {
                    // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
                    // 创建标签
                    var script = document.createElement('script');
                    //给定要跨域的地址 赋值给src
                    //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
                    script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
                    // 将组合好的带src的script标签追加到body里
                    document.body.appendChild(script);
               }
           }
       }
    </script>
 </head>
 
 <body>
 <input type="text" id="q" />
 <ul id="ul">
 
 </ul>
 </body>
 </html>