ssm框架controller層返回json格式數(shù)據(jù)到頁面的實現(xiàn)

更新時間：2020年09月06日 11:31:26 作者：時光斑駁了記憶

這篇文章主要介紹了ssm框架controller層返回json格式數(shù)據(jù)到頁面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

通常前端頁面發(fā)送ajax請求，我們只需要返回json格式數(shù)據(jù)就行

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 例如靜態(tài)資源 -->
	  <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數(shù)據(jù)

@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.前端接收數(shù)據(jù)并解析

渲染界面

<script>
$(document).ready(function(){
	$(function(){
		$.ajax({
			url:"empsJson",
			data:"pn=1",
			type:"get",
			success:function(data){
				//獲取controller傳來的json數(shù)據(jù)
				//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發(fā)送多個參數(shù)

發(fā)送