Ajax GET

Posted 2021-02-09 C

$ajax的post请求提交方式：

Controller：

 

@RequestMapping("/emps")
@ResponseBody
public Msg getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
// 调用com.github.pagehelper.PageInterceptor包中方法
// 传入页码以及数据容量
PageHelper.startPage(pn, 8);
// 查询
List<Employee> emps = employeeservice.getAll();
// 将此封装交给页面，
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}

@ResponseBody：将所有获取的数据转换为json形式。

method = RequestMethod.GET：设置请求方式为GET
输入url显示json数据

前台接收，拼接语句

<script type="text/javascript">
    var totalPagesUtil;

    //首页点击自动跳转第一页
    $(function() {
        to_page(1)
    });
    //===============================================================================
    //分页条信息跳转函数
    function to_page(pn) {
        $.ajax({
            url : "${page}/emps",
            data : "pn=" + pn,
            type : "GET",
            success : function(result) {
                //解析并显示员工
                build_emps_table(result);
                //解析并显示分页信息
                build_page_info(result);
                //解析并显示分页条
                build_page_nav(result);
            }
        });
    }
    //===============================================================================
    //员工表格
    function build_emps_table(result) {
        //清空上一次遗留到的数据，给下一次请求
        $("#emps_table tbody").empty();
        //调出员工数据
        var emps = result.userMsg.pageInfo.list;
        //jquery遍历
        $.each(emps, function(index, item) {
            //拼接一列
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender);
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            //按钮拼接
            var editBtnTd = $("<button></button>").addClass(
                    "btn btn-primary btn-sm edit_Btn").append(
                    $("<span></span>").addClass("glyphicon glyphicon-pencil"))
                    .append("edit");
            //为按钮绑定属性
            editBtnTd.attr("editBtn_id", item.empId);

            var deleBtnTd = $("<button></button>").addClass(
                    "btn btn-danger btn-sm dele_Btn").append(
                    $("<span></span>").addClass("glyphicon glyphicon-trash"))
                    .append("delete");
            var editordeleTd = $("<td></td>").append(editBtnTd).append(" ")
                    .append(deleBtnTd);
            //append方法执行完以后返回原来的元素
            $("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd)
                    .append(emailTd).append(deptNameTd).append(editordeleTd)
                    .appendTo("#emps_table");
        });
    }
    //===============================================================================
    //分页信息显示
    function build_page_info(result) {
        //清空上一次遗留到的数据，给下一次请求
        $("#page_info_current").empty();
        $("#page_info_totalpage").empty();
        $("#page_info_totalcount").empty();

        $("#page_info_current").append("当前第").append(
                "<span>" + result.userMsg.pageInfo.pageNum + "</span>").append(
                "页");
        $("#page_info_totalpage").append("共").append(
                "<span>" + result.userMsg.pageInfo.pages + "</span>").append(
                "页");
        $("#page_info_totalcount").append("共").append(
                "<span>" + result.userMsg.pageInfo.total + "</span>").append(
                "条数据");
        //总记录数
        totalPagesUtil = result.userMsg.pageInfo.total;
        //当前页数
        currentPage = result.userMsg.pageInfo.pageNum;
    }
    //===============================================================================
    //分页条显示
    function build_page_nav(result) {
        //清空上一次遗留到的数据，给下一次请求
        $("#page_li").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //首页
        var firstPageLi = $("<li></li>").append(
                $("<a></a>").append("首页").attr("href", "#"));
        //上下页图标
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        //判断是否上一页，禁用
        if (result.userMsg.pageInfo.hasPreviousPage == false) {
            prePageLi.addClass("disabled");
        } else {
            //不禁用时放行跳转
            prePageLi.click(function() {
                to_page(result.userMsg.pageInfo.pageNum - 1);
            });
        }
        firstPageLi.click(function() {
            to_page(1);
        });

        //===============================================================================

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        //判断是否下页。禁用
        if (result.userMsg.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
        } else {
            //不禁用时放行跳转
            nextPageLi.click(function() {
                to_page(result.userMsg.pageInfo.pageNum + 1);
            });
        }
        //末页
        var lastPageLi = $("<li></li>").append(
                $("<a></a>").append("末页").attr("href", "#"));
        lastPageLi.click(function() {
            to_page(result.userMsg.pageInfo.pages);
        })
        //===============================================================================
        ul.append(firstPageLi).append(prePageLi);
        //遍历连续页
        $.each(result.userMsg.pageInfo.navigatepageNums, function(index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            //点击连续也跳转
            numLi.click(function() {
                to_page(item)
            })
            //判断是否当前页显示状态
            if (result.userMsg.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            ul.append(numLi);
        })
        //拼接下一页等
        ul.append(nextPageLi).append(lastPageLi);
        var navEle = $("<nav></nav>").append(ul);
        //拼接总分页到div中
        navEle.appendTo("#page_li");
    }

 

 通过使用JS（jquery）获取并拼接sql语句

<!-- 主页显示 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1 align="center">
                    <i
                        class="layui-icon layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                        style="font-size: 30px;"></i> IntegrationSSM
                </h1>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4">
                <!-- 搜索 -->
                <div class="input-group">
                    <input type="text" class="form-control"
                        placeholder="Search name or email or department..."> <span
                        class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            search!
                        </button>
                    </span>
                </div>
            </div>

            <!-- 中间部分 -->
            <div class="col-md-4"></div>

            <!-- 按钮 -->
            <div class="col-md-4">
                <button type="button" class="btn btn-primary" id="btn_add_index">
                    <i class="layui-icon layui-icon-add-1"></i> add
                </button>
                <button type="button" class="btn btn-danger">
                    <!-- <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> -->
                    <i class="layui-icon layui-icon-close"></i> delete
                </button>
            </div>
        </div>
        <br> <br> <br>

        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <td>id</td>
                            <td>name</td>
                            <td>grader</td>
                            <td>email</td>
                            <td>department</td>
                            <td>operator</td>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页 -->
        <div class="row">
            <div class="col-md-8" id="page_li"></div>

            <div class="col-md-4">
                <div class="btn btn-default btn-lg btn-sm" disabled="disabled"
                    id="page_info_current">
                    <!-- 不可点击 -->

                </div>
                <div class="btn btn-default btn-lg btn-sm" disabled="disabled"
                    id="page_info_totalpage">
                    <!-- 不可点击 -->

                </div>
                <div class="btn btn-default btn-lg btn-sm" disabled="disabled"
                    id="page_info_totalcount">
                    <!-- 不可点击 -->

                </div>
            </div>
        </div>
    </div>

拼接完成解决完相应bug，显示以下信息

$以上只含部分关键代码，演示如何使用ajax和json。

代码中包含 bootstrap  layui 框架的内容