7.ajax验证用户名体验

1.代码

点击查看代码

<%--
  Created by IntelliJ IDEA.
  User: 啊哈哈哈7931
  Date: 2022/9/12
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="statics/js/jquery-3.4.1.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success: function (data) {
                    if (data === 'ok'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red")
                    }
                    $('#userInfo').html(data);

                }
            })

        };
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3" ,
                data:{"pwd":$("#pwd").val()} ,
                success:function (data) {
                   if (data === 'ok'){
                       $("#pwdInfo").css("color","green")
                   }else {
                       $("#userInfo").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>

controller

点击查看代码

package com.kuang.controller;

import com.kuang.pojo.User;
import org.junit.Test;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){

        return "hello";
    }
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:==>param"+name);
        if ("kuangshen".equals(name)){
            response.getWriter().print("true");
        }else {
           response.getWriter().print("false");
        }

    }

    @RequestMapping("/a2")
    public List<User> a2(){

      List<User> userList = new ArrayList<>();
        userList.add(new User("狂神说Java",1,"男"));
        userList.add(new User("狂神说前端",1,"女"));
        userList.add(new User("狂神说运维",2,"女"));


        return userList;

    }
    @RequestMapping("/a3")
    public String a3(String name,String pwd){
        String msg = "";
        if (name!=null){
            if ("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名输入有误";
            }
        }
        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码输入有误";
            }
        }
        return msg;


    }
}

JSON 乱码处理

点击查看代码


    <!--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>