使用Thymeleaf模板引擎，前后端未分离：
方式一：
.html文件：
// id 为sss
后端controller：
@Controller
public class HomeController {
@ResponseBody
@RequestMapping("/do")
public String index()
{
System.out.println("收到/do请求");
long t = System.currentTimeMillis();//获得当前时间的毫秒数
Random r = new Random(t);
int ran1 = r.nextInt(100); //每请求一个则会得到一个随机数
return "{\"id\":\""+ran1+"\"}"; //例如：{“id”：“20”}
}
}
如果后端需要接收前端传来的数据：
@Controller
public class HomeController {
@PostMapping("/do")
@ResponseBody
public String start(HttpServletRequest request)
{
String userid = request.getParameter("id"); // 接收id，收到null 则是数据格式出错！
System.out.println(userid);
return "{\"id\":\"20\"}";
}
}
p.s. 后端还可以这样写：
@Controller
public class LoginController {
@PostMapping("/user")
public String login(@RequestParam("username")String username,
@RequestParam("password")String password)
{
......
}
}
即可实现某个元素局部刷新
方式二：
前端：
查询
后端：
@Controller //注意是controller，因为restcontroller无法返回界面
public class DbController {
@Autowired
DataRepository dataRepository;
@GetMapping(value = "/search") //查询全部
@ResponseBody
public Listfind()
{
EquipmentInfo equipmentInfo=new EquipmentInfo();
return dataRepository.findAll();
}
@RequestMapping("/ajaxTest") // url
public String test(Model model){
System.out.println("ajaxTest");
Listlist = new ArrayList<>(10);
for(int i=0;i<10;i++){
list.add("hello"+i);
}
model.addAttribute("aa",list);
return "devicelist::div1"; //devicelist是你的html文件
//div1是你要局部刷新的容器的名字
}
}
datatable局部刷新：
前端：
ID
设备编号
设备名称
所属医院
设备状态
操作
查询
后端：(数据库操作不熟悉的同学请看我的其他博客)
@Controller
public class DbController {
@Autowired
DataRepository dataRepository;
//查询全部
@GetMapping(value = "/readdevice")
@ResponseBody
public Listfind()
{
EquipmentInfo equipmentInfo=new EquipmentInfo();
return dataRepository.findAll();
}
//查询设备号
@RequestMapping(value = "/searchdevice")
@ResponseBody
public Listsearch()
{
EquipmentInfo equipmentInfo=new EquipmentInfo();
return dataRepository.findByEquipno("1201120");
}
}
页面间传值：
第一个页面：
第二个页面取值：
当前设备: //键值为id