先搭建springMVC环境
web.xml文件
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" 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_3_0.xsd"> <display-name>ajaxTest</display-name> <!-- SpringMVC --> <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:config/springMVC.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 统一编码拦截器 --> <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> </web-app>
springMVC.xml文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:beans="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-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/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd" > <!-- 引入属性文件 --> <mvc:annotation-driven/> <!-- 自动扫描包(自动注入) --> <context:component-scan base-package="org.youlxb.controller" /> <!-- 静态资源路径 --> <mvc:resources location="/html/" mapping="/html/**"/> <mvc:resources location="/js/" mapping="/js/**"/> <!-- 视图配置 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/jsp/" p:suffix=".jsp" /> </beans>
再做2个bean文件,bean要实现Serializable接口,用于jackson解析,如果像Employee这样简单的类,可以不导入jackson包,即可完成数据传输。如果是Department这样的类,内部含有非基本类型的成员,必须实现序列化接口,导入jackson包
jackson包: jackson-core-2.2.3.jar
jackson-annotations-2.2.3.jar
jackson-databind-2.2.3.jar
package org.youlxb.bean;
import java.io.Serializable;
public class Employee implements Serializable {
private static final long serialVersionUID = -4636445000938877169L;
private String name;
private Integer age;
private String gender;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public String toString() {
return "Employee [name=" + name + ", age=" + age + ", gender=" + gender
+ "]";
}
}
package org.youlxb.bean;
import java.io.Serializable;
import java.util.List;
//这里要实现序列化接口,用于jackson解析
public class Department implements Serializable{
private static final long serialVersionUID = -3593228866192941289L;
private String name;
private List<Employee> employeeList;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<Employee> getEmployeeList() {
return employeeList;
}
public void setEmployeeList(List<Employee> employeeList) {
this.employeeList = employeeList;
}
@Override
public String toString() {
return "Department [name=" + name + ", employeeList=" + employeeList
+ "]";
}
}
- 1.服务器像浏览器推送json数据
controller文件
package org.youlxb.controller;
import java.util.LinkedList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.youlxb.bean.Department;
import org.youlxb.bean.Employee;
@Controller
@RequestMapping("employee")
public class EmployeeController {
@RequestMapping(value="getEmployee", method=RequestMethod.POST)
@ResponseBody
public Employee getEmployee(){
Employee em = new Employee();
em.setName("宵小");
em.setGender("男");
em.setAge(20);
return em;
}
@RequestMapping(value="getDepartment", method=RequestMethod.POST)
@ResponseBody
public Department getDepartment(){
Department dp = new Department();
LinkedList<Employee> emList = new LinkedList<Employee>();
Employee em1 = new Employee();
em1.setName("宵小郎");
em1.setGender("男");
em1.setAge(20);
Employee em2 = new Employee();
em2.setName("宵大郎");
em2.setGender("男");
em2.setAge(25);
emList.add(em1);
emList.add(em2);
dp.setName("部门1");
dp.setEmployeeList(emList);
return dp;
}
}
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>springMVC的ajax传参</title>
<style>
*{margin: 0; padding: 0}
html,body{position: relative; height: 100%; }
body{margin:0;padding:0; font:12px/14px "微软雅黑","宋体",Arial; color:#333; word-wrap:break-word;}
#console{position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; height: 200px; border: 2px solid #d2d2d2; overflow: scroll; box-sizing: border-box;z-index: 9999;}
</style>
</head>
<body>
<button id="btn1" type="button">获得employee</button>
<button id="btn2" type="button">获得department</button>
<div id="console"></div>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("#btn1").on("click", function(e){
$.post("../employee/getEmployee", function(data){
//console输出
//{"name":"宵小","age":20,"gender":"男"}
print(JSON.stringify(data));
});
});
$("#btn2").on("click", function(e){
$.post("../employee/getDepartment", function(data){
//console输出
//{"name":"部门1","employeeList":[{"name":"宵小郎","age":20,"gender":"男"},{"name":"宵大郎","age":25,"gender":"男"}]}
print(JSON.stringify(data));
});
});
function print(data){
var console = $("#console")[0];
var str;
if((typeof data) === "object"){
str = JSON.stringify(data);
}else{
str = data;
}
console.innerHTML += "<p>" + str + "</p><br />";
}
});
</script>
</html>