ssm项目之Ajax请求返还json解析

上一篇只适用于浏览器，但是我们客户端等的解析就麻烦了

所以用Ajax请求会比较好，以json发送给客户端

index.jsp直接发送ajax请求进行员工分页数据的查询，服务器返回json数据，然后浏览器使用js对json进行解析，通过dom增删改改变页面，这样就客户端无关性

导入jackson包 2.8.8

在EmployeeController.java中把RequestMapping("/emps")

/**
     * 导入jackson包
     * @param pn
     * @param model
     * @return
     */
    @RequestMapping("/emps")
    @ResponseBody
    public PageInfo  getEmpsWithJson(
            @RequestParam(value="pn", defaultValue="1")Integer pn,Model model) {
        //引入PageHelper分页插件
        //在查询之前只需要调用。传入页码，以及每页大小
        PageHelper.startPage(pn,5);
        //startPage后面紧跟的查询就是分页查询
        List<Employee> emps = employeeService.getAll();
        //pageInfo包装查询后的结果，只需要将pageINfo交给页面
        //封装了详细的分页信息，包括我们查询出来的数据，传入连续显示的页数
        PageInfo page = new PageInfo(emps,5);

        return page;
    }

启动访问下http://localhost:8080/ssm-crud/emps

但是这样不具有通用性，可以写一个有返回状态的，要添加其他的数据add就行了

package com.sgd.crud.bean;

import static org.hamcrest.CoreMatchers.theInstance;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用返回的类
 *
 */
public class Msg {
    //状态码 100-成功   200-失败
    private int code;
    //提示信息
    private String msg;

    //用户要返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<String,Object>();

    public static Msg success() {
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功!");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(200);;
        result.setMsg("处理失败!");
        return result;
    }

    public Msg add(String key,Object value) {
        this.getExtend().put(key, value);
        return this;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Map<String, Object> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }

}

页面就不用跳转的了，另外新建index.jsp，直接用ajax获取数据，然后解析返回的json数据，通过dom增删改页面

就是需要数据的时候请求，拼接json后显示在页面

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工列表</title>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 以/开始的相对路径，找资源，以服务器路径为基准 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 搭建显示页面 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- 表格数据 -->
        <div class="row">
            <div class=col-md-12>
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="check_all" />
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>department</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页数据 -->
        <div class="row">
            <!-- 分页文字信息 -->
            <div id="page_info_area" class="col-md-6">

            </div>

            <!-- 分页条信息 -->
            <div id="page_nav_area" class="col-md-6">

            </div>
        </div>

    </div>
    <script type="text/javascript">

    var totalRecord, currentPage;
    //1、页面加载完成以后，直接去发送一个 ajax 请求，要到分页数据,$表示页面加载完再执行这个函数
    $(function(){
        to_page(1);
    });

    function to_page(pn) {
        $.ajax({
            url:"${APP_PATH}/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.extend.pageInfo.list;

        $.each(emps, function(index, item) {
            var checkBoxTd = $("<td><input type=‘checkbox‘ class=‘check_item‘/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);

            var genderTd = $("<td></td>").append(item.gender==‘M‘?‘男‘:‘女‘);
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            /*
            <button type="button" class="">新增</button>
            <button type="button" class="btn btn-danger btn-sm">删除</button>
            <span class="" aria-hidden="true"></span>
            */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>"))
            .addClass("glyphicon glyphicon-pencil").append("编辑");
            editBtn.attr("edit-id", item.empId);

            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>"))
            .addClass("glyphicon glyphicon-trash").append("删除");
            delBtn.attr("del-id", item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            $("<tr></tr>").append(checkBoxTd)
            .append(empIdTd)
            .append(empNameTd)
            .append(genderTd)
            .append(emailTd)
            .append(deptNameTd)
            .append(btnTd)
            .appendTo("#emps_table tbody");

        });
    }

    //显示分页信息
    function build_page_info(result) {
        //清空数据
        $("#page_info_area").empty();
        //alert("hello");
        $("#page_info_area").append("当前 " +
                result.extend.pageInfo.pageNum + " 页，总 " +
                result.extend.pageInfo.pages + " 页，总 " +
                result.extend.pageInfo.total + " 条记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //显示分页条，点击分页要有动作
    function build_page_nav(result) {
        //清空数据
        $("#page_nav_area").empty();
        //page_nav_area
        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.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页事件
            //添加首页、前一页的点击
            firstPageLi.click(function() {
                to_page(1);
            });

            prePageLi.click(function() {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

        if(result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //添加末页、下一页的点击
            nextPageLi.click(function() {
                to_page(result.extend.pageInfo.pageNum + 1);
            });

            lastPageLi.click(function() {
                to_page(result.extend.pageInfo.pages);
            });
        }

        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.pageInfo.navigatepageNums,function(index, item){
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }

            numLi.click(function(){
                to_page(item);
            });

            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);

        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    </script>
</body>
</html>

mybatis-config.xml中配置合理化参数，也就是只会查询分页区间内的数据

这样，页面查询功能就完成了，接下来就是完成新增删除等等了

时间： 2024-10-04 06:07:51

ssm项目之Ajax请求返还json解析的相关文章

Flutter - 网络请求与 json 解析

Flutter网络请求与JSON解析 Flutter网络请求与JSON解析网络请求项目中用了两种,一个是 dart 自己的 dart:io, 另外一个是 dio 这个库. json 解析则用的是 dart:convert. 发起 HTTP 请求首先我们需要先导入 http 的支持包,然后创建 httpClient. import 'dart:io'; var httpClient = new HttpClient(); HttpClient 支持常见的 get.post.put.delete

ajax请求返回Json字符串运用highcharts数据图表展现数据

[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] [2] [2].[代码] Json字符串和highcharts数据图表展现跳至[1] [2] 001 /* 002 * Filename: OQtyOrPriceReport.js 003 * Description:客户订单数量和价格报表分析 004 * Created: 2013.11.14 005 * Author : liangjw 006 * Company:Copyright (C) 2013

解决ajax请求返回Json无法解析"\"字符的问题

原因:获取身份证信息,涉及图片路径,存在“\”字符,导致Json解析错误解决思路:将返回类型从"json"改成"text",此时返回的数据类型变成字符串,将字符串的"\"替换成"/",此时不存在Json格式错误的问题, 再调用Json.parse解析成Json格式 $.ajax({ type : "GET", //提交方式 url : "http://127.0.0.1:24010/ZKIDRO

SSM项目用ajax来显示数据

1 <script type="text/javascript"> 2 //1:页面加载完成后,直接去发送ajax请求,要到分页的数据 3 $(function(){ 4 $.ajax({ 5 url:"${APP_PATH}/emps", 6 data:"pn=1", 7 type:"GET", 8 success:function(result){ 9 //1:解析并显示员工数据. 10 build_emps_

IOS - 网络（HTTP请求、同步请求、异步请求、JSON解析数据）

1 // 2 // ViewController.m 3 // IOS_0129_HTTP请求 4 // 5 // Created by ma c on 16/1/29. 6 // Copyright © 2016年博文科技. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 #import "MBProgressHUD+MJ.h" 11 12 @interface ViewController

Ajax请求返回Json数据

介绍一下用Ajax向服务器请求数据的方法,以及对于返回的Json数据的使用. 1 $.ajax({ 2 type:"post", 3 async:false, 4 url: ******** 5 data:{"province":$("#provice").val(), 6 "city":$("#city").val(), 7 "area":$("#area").va

iOS 自己封装的网络请求，json解析的类

基本上所有的APP都会涉及网络这块,不管是用AFNetWorking还是自己写的http请求,整个网络框架的搭建很重要. 楼主封装的网络请求类,包括自己写的http请求和AFNetWorking的请求,代码简单,主要是框架搭建.简单来说,就是一个请求类,一个解析类,还有若干数据类. 以下代码以公开的天气查询api为例: 1.网络请求类我把常用的网络请求方法都封装好了,你只需要写自己的接口,传递apiName,params等参数就可以. #pragma mark ios请求方式 //ios自带的

网络请求之JSON解析

<一>JSON的基本知识什么是JSON:JSON的全称是JavaScript Object Notation(JavaScript对象符号),是目前使用最广泛的数据交换格式,具有跨平台.跨语言的优势,而且对照XML,JSON作为数据传输格式时,数据传输量更小,JSON数据格式既适合人来进行读写,又适合计算机本身解析和合成 JSON的数据结构: 由key-value对组成的数据结构,这种数据结构在不同的语言中有不同的实现,例如:在JavaScript中是一个对象,在Objective-C中是一

python 解析ajax请求带有json参数，请求方式是post的url（注意：参数的json格式的）

import requests # tag = 'http://exercise.kingname.info/exercise_ajax_1.html'#最开始的网址,下面两个为子链接 url = 'http://exercise.kingname.info/ajax_1_backend' url2 = 'http://exercise.kingname.info/ajax_1_postbackend' req = requests.get(url) print(req.text) params