springboot+jQuery+ajax实现一个简单的输入框的动态检测

最新推荐文章于 2025-02-27 12:39:07 发布

街角文艺青年

最新推荐文章于 2025-02-27 12:39:07 发布

阅读量1.1k

点赞数 2

文章标签： ajax java

本文链接：https://blog.youkuaiyun.com/qq_43732691/article/details/103697840

版权

springboot+jQuery+ajax实现一个简单的输入框的动态检测

1、在idea中新建一个springboot的项目，记得在选择项中勾上springWeb和模板引擎Thymeleaf

在这里插入图片描述

2、在resource目录下的templates新建一个index.html文件

在这里插入图片描述

代码为如下：

<!DOCTYPE html>
<html lang="en" xmlns:mvc="http://www.springframework.org/schema/mvc"
      xmlns:context="http://www.springframework.org/schema/context">
<head>
    <mvc:annotation-driven enable-matrix-variables="true"/>
    <context:component-scan base-package="com.example.demo"/>
    <mvc:default-servlet-handler/>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
    function f() {
        $.ajax({
            url:"/a",
            data:{
               "username":$("#yy").val()
            },
            success:function (data) {
                console.log(data);
                if(data.toString() == "success")
                {
                    $("#comtext").html("用户名合法")
                }else {
                    $("#comtext").html("用户名不合法")
                }

            }

        })

    }
    </script>

</head>
<body>
<p>
   用户名：
    <input  id="yy" type="text" onblur="f()">
    <span id="comtext"></span>
</p>
</body>
</html>

3、注意由于springboot2.0以上版本会拦截静态资源，所以需要新建一个配置类来添加静态资源加载路径

代码如下：

package com.example.demo.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class Config implements WebMvcConfigurer {


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**","/js/**").addResourceLocations("classpath:/static/","classpath:/js/"); 
    }

}

4、新建一个controller来响应ajax请求并返回相对应的数据

代码如下：

package com.example.demo.controller;

import com.sun.deploy.net.HttpRequest;
import com.sun.deploy.net.HttpResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.xml.ws.Response;
import java.util.ArrayList;
import java.util.List;

@Controller
public class helloController {

    @ResponseBody
    @RequestMapping("/a")
    public String  hello(String username)
    {
        if(username.equals("ljl"))
        {
            return "success";   //如果ajax请求过来的参数满足判断条件返回success
        }

        return "failure";    //如果ajax请求过来的参数不满足判断条件就failure
    }
}