Thymeleaf+jquery+Ajax 前后端交互（简单）+局部刷新+datatable局部刷新+页面间传值

使用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 List find()
{
    EquipmentInfo equipmentInfo=new EquipmentInfo();
    return dataRepository.findAll();
}

@RequestMapping("/ajaxTest")   //  url
public String test(Model model){
    System.out.println("ajaxTest");
    List list = 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 List find()
	{
    	EquipmentInfo equipmentInfo=new EquipmentInfo();
    	return dataRepository.findAll();
	}

	//查询设备号

	@RequestMapping(value = "/searchdevice")
	@ResponseBody
	public List search()
	{

    	EquipmentInfo equipmentInfo=new EquipmentInfo();
    	return dataRepository.findByEquipno("1201120");
	 }

}

页面间传值：

第一个页面：

第二个页面取值：

 

          当前设备:        //键值为id