通過前端頁面發送ajax請求，我們只需要返回json格式數據就行

1.在pom.xml加入依賴

<properties>
    <jackson.version>2.5.4</jackson.version>
  </properties>
  <dependencies>  
  <!-- controller返回json -->
  <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>

2.dispatcherServlet-servlet.xml中配置

 <!-- 兩個標準配置 -->
       <!-- 將springmvc 不能處理的請求交給tomcat  例如靜態資源 -->
       <mvc:default-servlet-handler/>
       <mvc:annotation-driven>
        <mvc:message-converters>
             <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
             <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
        </mvc:message-converters>
        </mvc:annotation-driven>

3.在controller中獲取返回的json數據

@Controller
public class EmployeeController {

//  查詢所有員工
    @Autowired
    EmployeeService employeeService;

    @RequestMapping("emps")
    @ResponseBody
    public List<Employee> getEmps() {
        List<Employee> emps=employeeService.getAll();
        System.out.println("emps "+emps.size());
        return emps;
    }

}

4.測試（使用postman）

5.前端接收數據并解析

渲染界面

<script>
$(document).ready(function(){
    $(function(){
        $.ajax({
            url:"empsJson",
            data:"pn=1",
            type:"get",
            success:function(data){
                //獲取controller傳來的json數據
                //alert(data[0].empId);
                //alert(data.length)
                empInfo(data);
            }
        })
    })
})
function empInfo(data){
    var str="";
    for(var i=0;i<data.length;i++){
        str+="<tr>"+
            "<td>"+data[i].empId+"</td>"+
            "<td>"+data[i].empName+"</td>"+
            "<td>"+data[i].gender+"</td>"+
            "<td>"+data[i].email+"</td>"+
            "<td>"+data[i].dId+"</td>"+
            "</tr>";
    }
    $("tbody").html(str)

    //下面這兩種加上沒有樣式
    /*  for(var i=0;i<data.length;i++){
        var tr=$("tbody").append("<tr></tr>");
        tr.append("<td>"+data[i].empId+"</td>");
        tr.append("<td>"+data[i].empName+"</td>");
        tr.append("<td>"+data[i].gender+"</td>");
        tr.append("<td>"+data[i].email+"</td>");
        tr.append("<td>"+data[i].dId+"</td>"); 
    }  */
    /* $.each(data,function(i,data){
        var tr=$("tbody").append("<tr></tr>");
        tr.append("<td>"+data.empId+"</td>");
        tr.append("<td>"+data.empName+"</td>");
        tr.append("<td>"+data.gender+"</td>");
        tr.append("<td>"+data.email+"</td>");
        tr.append("<td>"+data.dId+"</td>");
    }) */
}
</script>

ajax發送多個參數

發送

接收