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

使用Thymeleaf模板引擎，前后端未分离：

方式一：

.html文件：

 <div id="sss">
              // id 为sss
 </div>

<script>

function refresh(){

		//需要发送的数据
		var modeljson={
        "id": "1"
   		 }
   		 
    	$.ajax({
        	url: "/do",
        	type: 'post',
        	//contentType: 'application/json', //没规定就是默认的application/x-www-form-urlencoded; charset=UTF-8
        							//格式的问题真的是头大，如果大家出现前端明显送出了数据但是后端取出为null 的时候，
        							//肯定是格式问题了，建议都用默认格式好了
        							
        	data:modeljson,  //要发的数据，如果出现格式问题则 JSON.stringify(modeljson)
        	async: true,
        	success: function(data){
        	if(data != null){
            	var a = JSON.parse(data) //必要的
            	alert(a.id);
            	$("#sss").html(a.id);
        	}
    	}
	});
 }

var interval_online = setInterval(refresh,1000);//1秒刷新一次在线设备

</script>

后端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)
 	{
  			......
	}
}

即可实现某个元素局部刷新

方式二：

前端：

	<div id="div1" th:fragment="div1">
            <div th:if="${aa} ne null">
                <ul th:each="a : ${aa}">
                    <li th:text="${a}"></li>
                </ul>
            </div>
     </div>
     <button id="btn"> 查询 </button>


<script>

 $('#btn').click(function () {
    	var url = '/ajaxTest';    //  url
    	$('#div1').load(url);
	})

</script>

后端：

@Controller  //注意是controller，因为restcontroller无法返回界面

public class DbController {

@Autowired
DataRepository dataRepository;

@GetMapping(value = "/search")  //查询全部
@ResponseBody
public List<EquipmentInfo> find()
{
    EquipmentInfo equipmentInfo=new EquipmentInfo();
    return dataRepository.findAll();
}

@RequestMapping("/ajaxTest")   //  url
public String test(Model model){
    System.out.println("ajaxTest");
    List<String> 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局部刷新：

前端：

	<table class="table table-striped table-bordered table-hover" id="device" width="100%">
                                <thead>
                                <tr>
                                    <th width="10%">ID</th>
                                    <th width="15%">设备编号</th>
                                    <th width="15%">设备名称</th>
                                    <th width="25%">所属医院</th>
                                    <th width="10%">设备状态</th>
                                    <th width="25%">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
     </table>
     
	<button id="btn"> 查询 </button>


	<script>
	
	 var url;
	 function getdevice(url) {
    		var table;
   			table = $('#device').DataTable({
        	ajax: {
            	url:url,
            	dataSrc: ""
        	},
        	columns: [
            	{"data": null},
            	{"data": "equipno"},
            	{"data": "equipname"},
            	{"data": "equiphosipital"},
            	{"data": null}
        	],

        searching: false,//是否显示搜索框
    });

};

	$('#btn').click(function () {         //通过按键，重新建表，请求新的url

    	var datatable = $("#device").dataTable();
    	datatable.fnClearTable();    //清空数据
    	datatable.fnDestroy();       //销毁datatable
    	getdevice("/searchdevice");  //重新绑定，新的url

		})

	window.onload=function(){               //一开始进入界面的时候加载的内容
    	getdevice("/readdevice");
	}

</script>

后端：（数据库操作不熟悉的同学请看我的其他博客）

@Controller
public class DbController {
	@Autowired
	DataRepository dataRepository;

	//查询全部
	@GetMapping(value = "/readdevice")
	@ResponseBody
	public List<EquipmentInfo> find()
	{
    	EquipmentInfo equipmentInfo=new EquipmentInfo();
    	return dataRepository.findAll();
	}

	//查询设备号

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

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

}

页面间传值：

第一个页面：

<script>

$('#device tbody').on('click', '#detail', function () {
    //获取行
    var row = $("table#device tr").index($(this).closest("tr"));
    //获取某列（从0列开始计数）的值,设备编号
    var no = $("table#device").find("tr").eq(row).find("td").eq(1).text();

    window.location.href='/device/operating/detail?id='+no;          //关键语句
    //该路径在WebMvcConfigurer里配置一下，
    // registry.addViewController("/device/operating/detail").setViewName("deviceonline");

})

</script>

第二个页面取值：

 <h3 class="page-header">
          当前设备: <small th:text="${param.id}"></small>       //键值为id
 </h3>

<script>

 	 var id=[[${param.id}]];
	 alert(id);

</script>