基于Mybatis和Jquery的模糊查询以及联想查询

最新推荐文章于 2022-02-23 09:38:13 发布

acwing

最新推荐文章于 2022-02-23 09:38:13 发布

阅读量363

点赞数

文章标签： jquery ajax javascript mybatis

本文链接：https://blog.csdn.net/acwing/article/details/120630696

版权

页面
	为用户输入框绑定鼠标点击事件、
	获取输入的用户名数据
	判断用户名是否为空
	如果为空 则将联想提示框隐藏
	如果不为空，则发送AJAX请求 并将响应的数据显示到联想框

服务器
	获取请求参数
	调用业务层的模糊查询方法
	并将返回的数据转成JSON 并相应给客户端

对应的项目文件结构
在这里插入图片描述

搜索界面展示

在这里插入图片描述

对应的前端页面

控制样式且实现对应的异步数据提交对返回的data进行判断是否需要展示对应的数据联想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索页面</title>
    <style type="text/css">
        .content{
            width: 640px;
            margin:  100px auto;
            text-align: center;
        }
        input[type='text']{
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button']{
            width: 100px;
            height: 46px;
            background: #eee29a;
            border: 0;
            color: red;
            font-size: 15px;
        }
        .show{
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px ;
            soild: #67c670;
            border-top: 0;
            display: none;
        }
    </style>
</head>

<body>
<form autocomplete="off">
  <div class="content">
    <br/><br/>
    <input type="text" id="username">
    <input type="button" value="搜索一下">
    <div id="show" class="show"></div>
  </div>
</form>
</body>

<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->

<script src="js/jquery-3.2.1.min.js"></script>

<script>
    $("#username").mousedown(function() {
        // 获取输入的用户名
        let username = $("#username").val();


        if(username == null || username == ""){
            // 如果为空 将联想框隐藏起来
            $("#show").hide();
            return ;
        }

        $.ajax({
            //  请求资源的路径
            url:"userServlet",
            // 请求参数
            data:{"username":username},
            // 请求方式
            type:"POST",
            // 响应数据形式
            dataType:"json",
            // 请求成功后的回调函数
            success:function (data) {  
                let  names = "";
                for(let i=0 ; i<data.length;i++){
                    names += "<div>"+data[i].name+"</div>";
                }
                $("#show").html(names);
                $("#show").show();
            }
        });
    });
</script>
</html>

对应的UserService层进行对应的参数获取以及调用业务层的模糊查询方法
最终将数据转换为json数据响应到客户端

@WebServlet("/userServlet")
public class UserSevice extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");

        String username = request.getParameter("username");

        UserService service = new UserServiceImpl();
        List<User> users = service.selectLike(username);

        ObjectMapper mapper  = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        response.getWriter().write(json);
    } 
    
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

对应的接口实现类

public class UserServiceImpl implements UserService {
    //  对应的接口实现类

    @Override
    public List<User> selectLike(String username) {
        List<User> users = null;
        SqlSession sqlSession = null;
        InputStream is= null;
        try {
            is = Resources.getResourceAsStream("Resources/MybatisConfig.xml");
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            sqlSession = sqlSessionFactory.openSession(true);

            UserMapper mapper = sqlSession.getMapper(UserMapper.class);
            users = mapper.selectLike(username);

        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if(sqlSession != null){
                sqlSession.close();
            }
            if(is != null){
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return users;
    }
}

对应映射

public interface UserMapper {

    @Select("SELECT * FROM username WHERE name LIKE CONCAT('%',#{username},'%') ORDER BY search_count DESC LIMIT 0,4")
    public abstract List<User> selectLike(String username);
}

日志和jdbc工具类都是常规操作

对应的MybatisConfig

<?xml version="1.0" encoding="UTF-8"?>
<!--DTD约束-->
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--核心跟标签-->
<configuration>

<!--  引入数据库连接的配置文件-->
    <properties resource="jdbc.properties"/>

<!--    集成LOG4J的日志信息-->
    <settings>
        <setting name="logImpl" value="log4j"/>
    </settings>


    <environments default="mysql">
        <environment id="mysql">
            <!--采用JDBC的事务-->
            <transactionManager type="JDBC"></transactionManager>
            <!-- 数据源信息    代表数据库连接池-->
            <dataSource type="POOLED">
                <property name="driver" value="${driverClass}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>
            </dataSource>
        </environment>
    </environments>

<!--    配置映射文件-->
    <mappers>
<!-- 接口所在的包  注意class和resource以及 package 区别-->
        <mapper class="ch.mapper.UserMapper"/>
    </mappers>
</configuration>

resource 加载方式

	适用于类路径下的文件加载(注意:mybatis原始开发Dao.xml文件与接口文件不在同一路径下,仅能用resource加载映射文件)

class 加载方式

仅适用于类路径下,接口文件与映射文件在同一路径下,且接口名与映射文件名相同,并且映射文件命名为接口全类名的情况.

package 加载方式(class加载方式的简写方式)

适用于类路径下,接口文件与映射文件在同一路径下,且接口名与映射文件名相同,并且映射文件命名为接口全类名的情况.

最终实现的效果哈哈哈哈哈哈哈好丑的页面展示…

在这里插入图片描述

acwing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Mybatis和Jquery的模糊查询以及联想查询

页面为用户输入框绑定鼠标点击事件、获取输入的用户名数据判断用户名是否为空如果为空则将联想提示框隐藏如果不为空，则发送AJAXi请求并将响应的数据显示到联想框服务器获取请求参数调用业务层的模糊查询方法并将返回的数据转成JSON 并相应给客户端对应的项目文件结构中间会出现对应的找不到Mybatis文件或者对应的映射文件搜索界面展示...
复制链接

扫一扫