springboot+mybatis+mysql+jquery+easyui+ajax小模块

由于提问中包含了多个技术栈，并且没有明确的问题描述，我将提供一个简单的例子，展示如何使用Spring Boot, MyBatis, MySQL, jQuery和EasyUI创建一个简单的Ajax应用。

假设我们有一个简单的用户表（users），并希望通过Ajax方式在前端显示用户列表，并支持分页。

创建User实体和对应的MyBatis接口：




// User.java
public class User {
    private Integer id;
    private String name;
    // 省略getter和setter
}
 
// UserMapper.java
@Mapper
public interface UserMapper {
    List<User> selectAllUsers();
    List<User> selectUsersByPage(@Param("start") int start, @Param("end") int end);
    // 省略其他方法的实现
}

在MyBatis的XML映射文件中定义SQL语句：




<mapper namespace="com.example.mapper.UserMapper">
    <!-- 其他SQL语句 -->
    <select id="selectAllUsers" resultType="User">
        SELECT * FROM users
    </select>
    <select id="selectUsersByPage" resultType="User">
        SELECT * FROM users LIMIT #{start}, #{end}
    </select>
    <!-- 省略其他SQL语句 -->
</mapper>

创建Controller处理Ajax请求：




@Controller
public class UserController {
 
    @Autowired
    private UserMapper userMapper;
 
    @RequestMapping("/loadUsers")
    @ResponseBody
    public Map<String, Object> loadUsers(@RequestParam(defaultValue = "1") int page) {
        Map<String, Object> result = new HashMap<>();
        int pageSize = 10; // 假设每页显示10条数据
        int start = (page - 1) * pageSize;
        int end = start + pageSize;
        List<User> users = userMapper.selectUsersByPage(start, end);
        result.put("total", userMapper.selectAllUsers().size());
        result.put("rows", users);
        return result;
    }
}

创建HTML页面，使用jQuery和EasyUI实现Ajax分页：




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table class="easyui-datagrid" style="width:700px;height:250px"
            url="/loadUsers"
            title="用户列表" iconCls="icon-save"
            rownumbers="true" pagination="true">
        <thead>
            <tr>
                <th field="id" width="50">ID</th>
                <th field="name" width="100">姓名</th>
                <!

springboot+mybatis+mysql+jquery+easyui+ajax小模块

评论已关闭

推荐阅读