ajax请求时如何解析json数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax请求时如何解析json数据相关的知识，希望对你有一定的参考价值。
参考技术A 服务器需要返回json格式的数据，然后在ajax的返回类型设置为json格式，就可以在返回的数据当中直接所以json数据了。ssm项目之Ajax请求返还json解析
本文地址:http://www.cnblogs.com/maplefighting/p/7499338.html
上一篇只适用于浏览器，但是我们客户端等的解析就麻烦了
所以用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("«")); 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("»")); 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中配置合理化参数，也就是只会查询分页区间内的数据
这样，页面查询功能就完成了，接下来就是完成新增删除等等了
以上是关于ajax请求时如何解析json数据的主要内容，如果未能解决你的问题，请参考以下文章
JSON字符串转换JSON对象，在JS页面转换成功，但是ajax提交json数据,后台解析抛出异常