今天學了springMVC使用ajax返回json物件,並在前臺頁面用jquery進行遍歷,大家看完了可以嘗試做一個簡單的二/三級聯動哦,

首先先導好spring+springMVC,jar包,這個大家都清楚,就不一一細列了,除外還需要匯入兩個json用的jar :

jackson-core-asl-1.9.7.jar

  jackson-mapper-asl-1.9.7.jar

還有jquery-3.1.1.min.js

好了,下面開始程式碼演示 : 

1.applicationContext.xml配置 :

<?xml version="1.0" encoding="UTF-8"?>  
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:tx="http://www.springframework.org/schema/tx"   
    xmlns:aop="http://www.springframework.org/schema/aop"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
                        http://www.springframework.org/schema/beans/spring-beans.xsd  
                        http://www.springframework.org/schema/context 
                        http://www.springframework.org/schema/context/spring-context-3.0.xsd  
                        http://www.springframework.org/schema/tx  
                        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd  
                        http://www.springframework.org/schema/aop 
                        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
                        http://www.springframework.org/schema/mvc 
                		http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> 
   
    <!-- 開啟註解 -->
	<context:annotation-config/>   
    <!-- 掃描包設定 -->
	<context:component-scan base-package="com.zrrd.*"/> 
	<!-- 啟用3.0新註解 -->
    <mvc:annotation-driven />  
	<!-- 啟動Spring MVC的註解功能，完成請求和註解POJO的對映 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>

</beans>
 

2.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <welcome-file-list>
   		<welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
  
	<context-param>  
	    <param-name>contextConfigLocation</param-name>  
	    <param-value>classpath:applicationContext.xml</param-value>  
	</context-param>  
		
	<!-- 伺服器啟動時，通過監聽器初始化Spring的配置環境   
	    監聽器，預設載入檔案是：/WEB-INF/applicationContext.xml  
	-->  
	<listener>  
	    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
	</listener>  
  
	<!-- 配置字符集過濾器 -->
	<filter>
		<filter-name>encodingFilter</filter-name>
	    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
	    <init-param>
	          <param-name>encoding</param-name>
	          <param-value>UTF-8</param-value>
	    </init-param>
	    <init-param>
	         <param-name>forceEncoding</param-name>
	         <param-value>true</param-value>
	     </init-param>
	</filter>
	
	<filter-mapping>
	     <filter-name>encodingFilter</filter-name>
	     <url-pattern>/*</url-pattern>
	</filter-mapping>
  
  
	<!--    springMVC 核心控制器   -->
	<servlet>
		<servlet-name>dispatcherServlet</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		
	<!-- 初始化引數  springmvc 配置檔案 -->
	<init-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
	</servlet>
	
	
	<servlet-mapping>
		<servlet-name>dispatcherServlet</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
</web-app>
 

package com.zrrd.json.controller;

/**
 * @user : vcen

 * @ClassName: Student

 * @TODO : 學生實體類

 * @date 2016-12-12 下午12:41:13
 */
public class Student {
	private int stuId;
	private String stuName;
	private String stuSex;
	
	public int getStuId() {
		return stuId;
	}
	public void setStuId(int stuId) {
		this.stuId = stuId;
	}
	public String getStuName() {
		return stuName;
	}
	public void setStuName(String stuName) {
		this.stuName = stuName;
	}
	public String getStuSex() {
		return stuSex;
	}
	public void setStuSex(String stuSex) {
		this.stuSex = stuSex;
	}
}
 

4.controller : 

package com.zrrd.json.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**

 * @user : vcen

 * @ClassName: JosnController

 * @TODO : controller控制層

 * @date 2016-12-12 下午12:37:43

 */
@Controller
@RequestMapping("josnController")
public class JosnController {
	
	@ResponseBody
	@RequestMapping("ajaxTest.do")
	public List<Student> test(){
		List<Student> list = new ArrayList<Student>();
		
		//注入值
		Student stu = new Student();
		stu.setStuId(1);
		stu.setStuName("張三");
		stu.setStuSex("男");
		list.add(stu);

		Student stu2 = new Student();
		stu2.setStuId(2);
		stu2.setStuName("李四");
		stu2.setStuSex("女");
		list.add(stu2);
		
		return list;  //直接返回list物件
	}
}

前臺顯示頁面 : 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<!-- 引入jquery檔案 -->
	<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>
  </head>
  
  <body>
        <button onclick="$.clickJson()">點我</button>
        <div id="div1"></div>
        
        <script type="text/javascript">
        	$.extend({clickJson:function(){
        		  $.ajax({
					   type: "POST",
					   url: "<%=path%>/josnController/ajaxTest.do",
					   success: function(msg){
					   	   //msg : 返回的json物件     // i :元素下標   , n : 遍歷出來的學生物件
					       $.each(msg,function(i,n){
					       		$("#div1").append("<p>"+n.stuId+","+n.stuName+","+n.stuSex+"</p>");
					       });
					   }
				});
        	}});
        </script>
  </body>
</html>

好了,演示到這裡吧!!!