ajax异步之实时验证用户名是否存在及html页面出现中文乱码解决

繁星天空

已于 2022-03-21 09:14:16 修改

阅读量328

点赞数 4

文章标签： ajax

于 2021-09-16 11:02:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45649806/article/details/120324531

版权

本文通过实例展示了如何使用Spring、SpringMVC和Mybatis框架配合Ajax实现页面无刷新的用户名验证，包括前端HTML、jQuery交互及后端接口处理。遇到中文乱码问题时，提供了web.xml中编码过滤器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax异步请求验证可以使页面无刷新即可完成相关操作,此文章代码所使用的的框架为Spring+SpringMVC+Mybatis。若提示信息为中文乱码，请查看文章底部解决方法！
先上效果图：（用户名存在或者为空则注册按钮不能点击）

1、html页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <title>ajax实时验证</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        input{
            width:200px;
            height:30px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        button{
            margin-top: 10px;
            width: 50px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <input type="text" id="usernameTag" name="username" placeholder="用户名" required><span id="msg"></span><br>
            <input type="text" id="password" placeholder="密码" required><br>
            <button type="submit" id="button">注册</button>
        </form>
    </div>
</body>
</html>

2、js代码

$(function () {
    //id为usernameTag的输入框失去焦点后触发
    $("#usernameTag").blur(function () {
        var userName = $(this).val();
        var msg = $("#msg");

        //如果用户名为空则不判断，并清空之前判断的提示信息
        if(userName == ''){
            msg.html(null);
            return false;
        }

        //data里存放的是后台返回给前端的数据
        $.post("register",{"username":userName},function (data) {
            if(data.userExist){
                msg.html(data.msgInfo);
                msg.css("color","red");
                //若用户名存在则提交按钮禁止点击
                document.getElementById("button").disabled = true;
            }else {
                msg.html(data.msgInfo);
                msg.css("color","green");
                //若用户名不存在则提交按钮可以点击
                document.getElementById("button").disabled = false;
            }
        },"json");
    });
});

3、dao层

import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;

@Repository
public interface UserDao {

    //用户注册验证
    @Select("select * from user where u_loginName = #{u_loginName}")
    public User queryUserByRegister(String u_loginName);

}

4、service层

public interface UserService {

    //用户注册验证
    public User queryUserByRegister(String u_loginName);

}

5、service层接口实现

import com.lyh.dao.UserDao;
import com.lyh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;

    //用户注册验证操作
    @Override
    public User queryUserByRegister(String u_loginName) {
        return userDao.queryUserByRegister(u_loginName);
    }

}

6、controller层

@RequestMapping("/register")
    public void userCheck(HttpServletRequest request, HttpServletResponse response) throws IOException {

        String username = request.getParameter("username");
        Map<String,Object> map = new HashMap<String,Object>();
        User user =userService.queryUserByRegister(username);
        if(user != null){
            map.put("userExist",true);
            map.put("msgInfo","用户名已存在");
        }else{
            map.put("userExist",false);
            map.put("msgInfo","用户名可以使用");
        }
        ObjectMapper om = new ObjectMapper();
        om.writeValue(response.getWriter(),map);

    }

7、页面出现乱码问题解决

在web.xml文件中加入如下代码：

<!--编码过滤器-->
<filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>