ajax展示后端传来的json数据
po层
package com.bh.po;
public class Emp {
private int empno;
private String ename;
private String job;
private String salary;
private int deptno;
public int getEmpno() {
return empno;
}
public void setEmpno(int empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public String getSalary() {
return salary;
}
public void setSalary(String salary) {
this.salary = salary;
}
public int getDeptno() {
return deptno;
}
public void setDeptno(int deptno) {
this.deptno = deptno;
}
}
po层定义一个返回值类R包含处理状态、处理信息、处理结果
package com.bh.po;
import java.util.Map;
public class R {
//处理结果code（2000,2001,5000）
private int status;
//处理结果的message
private String message;
//处理结果
private Map<String,Object> data;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Map<String, Object> getData() {
return data;
}
public void setData(Map<String, Object> data) {
this.data = data;
}
}
dao层接口
package com.bh.dao;
import com.bh.po.Emp;
import java.util.List;
public interface EmpDAO {
public List<Emp> findAll();
}
mapper
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bh.dao.EmpDAO">
<select id="findAll" resultType="com.bh.po.Emp">
select * from emp
</select>
</mapper>
service层接口
package com.bh.service;
import com.bh.po.R;
import java.util.List;
public interface IService {
/*public List findAll();*/
public R findAll();
}
service实现类
package com.bh.service.impl;
import com.bh.dao.EmpDAO;
import com.bh.po.Emp;
import com.bh.po.R;
import com.bh.service.IService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
@Service
public class EmpServiceImpl implements IService {
@Autowired
private EmpDAO empDAO;
@Override
public R findAll() {
R r = new R();
HashMap<String, Object> rsMap = new HashMap<>();
List<Emp> all = empDAO.findAll();
if (all == null || all.size()==0){
r.setStatus(2001);
r.setMessage("没有数据");
rsMap.put("items","empty");
r.setData(rsMap);
}else {
r.setStatus(2000);
r.setMessage("检索成功");
rsMap.put("items",all);
r.setData(rsMap);
}
return r;
}
}
controller
package com.bh.controller;
import com.bh.po.R;
import com.bh.service.impl.EmpServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/emp")//多定义一层目录防止路径相同
public class EmpController {
@Autowired
private EmpServiceImpl empService;
@RequestMapping("/findall.do")
public @ResponseBody R findAll(){
R r = empService.findAll();
return r;
}
}
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>emp</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
/* $(document).ready(function () {
alert("hello world")
})*/
function findEmp(){
console.log("start======")
//使用jquery请求后端
$.ajax({
//请求的url
url:"emp/findall.do",
type:"post",
//请求的参数(前端往后端返回的数据)
data:{},
//dataType: "json", //返回数据的格式
//后端返回结果的回调函数
success:function (data){
if (data.status == 2000){
alert(data.message);
var tbObj = document.getElementById("tb01");
var headTr = document.createElement("tr");
var headTd1 = document.createElement("td")
headTd1.innerText = "emoNo";
var headTd2 = document.createElement("td");
headTd2.innerText = "姓名";
var headTd3 = document.createElement("td");
headTd3.innerText = "职位";
var headTd4 = document.createElement("td");
headTd4.innerText = "薪资";
var headTd5 = document.createElement("td");
headTd5.innerText = "部门编号";
headTr.append(headTd1);
headTr.append(headTd2);
headTr.append(headTd3);
headTr.append(headTd4);
headTr.append(headTd5);
tbObj.append(headTr);
//遍历data.data.items的内容,追加table中的内容行
for (var i = 0; i < data.data.items.length; i++) {
//获取检索结果中的一行数据
var temp = data.data.items[i]
// console.log(temp);
// empno ==> temp.empno
// ename ==> temp.ename
// job ==> temp.job
// salary ==> temp.salary
// deptno ==> temp.deptno
var Tr1 = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText = temp.empno;
var td2 = document.createElement("td");
td2.innerText = temp.ename;
var td3 = document.createElement("td");
td3.innerText = temp.job;
var td4 = document.createElement("td");
td4.innerText = temp.salary;
var td5 = document.createElement("td");
td5.innerText = temp.deptno;
Tr1.append(td1);
Tr1.append(td2);
Tr1.append(td3);
Tr1.append(td4);
Tr1.append(td5);
tbObj.append(Tr1);
}
}
}
});
}
</script>
</head>
<body>
<h1>EMP</h1>
<input type="button" value="click me" onclick="findEmp()"/>
<table id="tb01" border="1" align="center" cellpadding="0" cellspacing="0"></table>
</body>
</html>
点击按钮后
浙公网安备 33010602011771号