Ajax实现细节（SSM）

导包

 <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.12.1</version>
  </dependency>

这个包可以让后台数据以json串的格式响应给前台

要实现的功能

点击删除员工，不刷新页面，删除数据库中的数据，重新渲染这个table

1.jsp代码

<tbody id="empTable">
											
												<c:forEach items="${allEmp}" var="emp">
													<tr>
														<td class="hidden-480">${emp.id}</td>
														<td>${emp.empName}</td>
														<td class="hidden-480">${emp.empDept}</td>
														<td>${emp.empPo}</td>
														<td class="hidden-480">${emp.empSex}</td>
														<td><a onclick="deleteEmpById(${emp.id})">删除员工</a>&nbsp<a onclick='updateEmpById(${emp.id})'>更新员工</a></td>
													</tr>
												</c:forEach>
												</tbody>

2.js代码

function deleteEmpById(id){
					$.ajax({
						url:"/NewRepo/emp/deleteById",
						dataType:"json",
						data:{"id":id,"pageNum":pageNum},
						success:function (data){
							var htmlStr="";
					  		/*alert(data);*/
							$.each(data, function (n,value) {
								htmlStr+="<tr><td class='hidden-480'>"+value.id+"</td><td class='hidden-480'>"+value.empName+"</td><td class='hidden-480'>"+value.empDept+"</td> <td>"+value.empPo+"</td> <td class='hidden-480'>"+value.empSex+"</td> <td><a οnclick='deleteEmpById("+value.id+")'>删除员工</a&nbsp<a οnclick='updateEmpById("+value.id+")'>更新员工</a></td> </tr>";
							});
							$("#empTable").html(htmlStr);
						}
					});
				};

3.后台代码

 /**
     * 删除员工的ajax
     * @param id
     * @param pageNum
     * @return
     * @throws JsonProcessingException
     */
    @RequestMapping("/deleteById")
    @ResponseBody
    public String deleteEmpById(Integer id,Integer pageNum) throws JsonProcessingException {
        empDao.deletEmpById(id);
        PageHelper.startPage(pageNum,5);
        String jsonRes=new ObjectMapper().writeValueAsString(empDao.getAllEmp());
        System.out.println(jsonRes);
        return jsonRes;
    }

注意Controller类的注解：
@Controller
@RequestMapping(value = “/emp”,produces=“text/html;charset=UTF-8;”)//否则json响应乱码