SSM框架下使用ajax实现jsp和controller的数据互传

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

数据传输方向

JAR包的引入

AJAX值的格式为JSON因此需要在lib文件夹下加入相应的jackson包。项目所需的所有jar包如下图所示。

所需JAR包下载地址

JAR包下载地址

JSP页面

在JSP页面中需要添加id方便Ajax传递数据给前端。

	<!--修改页面的弹窗-->
	<div id="my_dialog" title="详细信息"  style="display: none">
		<form:form modelAttribute="lab"  method="post" action="${pageContext.request.contextPath}/main/lab/updataLab"  style="width: 770px">
			<table style="font-family: '楷体';width: 770px">
			<tr>
				<td><strong style="color: red;">*<4>共建实验室代码：</td>
				<td><form:input path="labid" id="newlabid" type="number" /></td>
				<td><strong style="color: red;">*<4>共建实验室名称：</td>
				<td><form:input path="labname" id="newlabname" type="text"  /></td>
			</tr>
			<tr>
				<td><strong style="color: red;">*<4>面向专业：</td>
				<td><form:input path="labmajor" id="newlabmajor" type="text"/></td> 
			</tr>
			<tr>
				<td>共建单位名称：</td>
				<td><form:input path="labunit" id="newlabunit" type="text"/></td>
				<td><strong style="color: red;">*<4>共建时间：</td>
				<td><form:input path="labtime" id="newlabtime" pattern="yyyy-MM-dd" type="date"/></td>
			</tr>
			<tr>
				<td>接受学生时间：</td>
				<td><form:input path="labstutime" id="newlabstutime" type="date"/></td>
				<td><strong style="color: red;">*<4>接收顶岗实习学生人数：</td>
				<td><form:input path="labstunum" id="newlabstunum" type="number"/></td>
			</tr>
			<tr>
				<td>单位投入设备总值(万元)：</td>
				<td><form:input path="labtotal" id="newlabtotal" type="number"/></td>
			</tr>
			</table>

            <div style="float: right;">
            	<button class="my-btn-blue" onclick="create_paper_cancel()">取消<^tton>
                <button class="my-btn-blue" onclick="create_paper_save()">保存<^tton>
            </div>
		</form:form>

AJAX代码

AJAX在获取前端复选框的数据后将数据传递给Controller，Controller调用查询方法并将结果以JSON格式传递给AJAX。AJAX使用document.getElementById()方法将数据传递给前端对应id的input框。

	//获取html数据传输给查询数据库的页面
	$.ajax({
		type:'POST',
		url:"http://localhost:8080/schoolsys/main/lab/searchDB",//查询数据库页面
		async:true,
		data:{
			labid:states,
		},
		success:function(data){
			for(var i = 0; i < data.length; i++){
				document.getElementById("newlabid").value = data[i].labID;
				document.getElementById("newlabname").value = data[i].labname;
				document.getElementById("newlabmajor").value = data[i].labmajor;
				document.getElementById("newlabunit").value = data[i].labunit;
				document.getElementById("newlabtime").value = new Date(data[i].labtime).format("yyyy-MM-dd");
				document.getElementById("newlabstutime").value =new Date(data[i].labstutime).format("yyyy-MM-dd");
				document.getElementById("newlabstunum").value = data[i].labstunum;
				document.getElementById("newlabtotal").value = data[i].labtotal;
			}
		},error:function(){
			alert("error")
		}
	});

这里需要注意的是url地址应为controller中对应的RequestMapping地址。

Controller

Controller中使用HttpServletResponse来获取AJAX传递的数据。（注：在controller使用@ResponseBody注解将数据转换为json格式）

	//更新数据
	@RequestMapping("/lab/searchDB")
	@ResponseBody
	public List<Map<String, Object>> searchDB(Integer labid,HttpServletResponse response) {
		List<Map<String, Object>> lab=labService.searchDB(labid);
		return lab;
	}
	@RequestMapping("/lab/updataLab")
	public String updataLab(Lab lab,Model model) {
		labService.updataLab(lab);
		return selectLab(lab, model);
	}

运行效果图

查询结果回显

修改结果：

这是本人在做作业时遇到的问题，使用上述方式已解决，故总结整理方便以后使用。大家若发现问题可以及时指正。