spring MVC与ajax通信
2016-02-03 10:23
417 查看
最近在自学spring MVC,由于公司的项目是只使用servlet,前端用的是html、js和ajax。公司的架构思想其实是和sring MVC是有些相似的,也是通过注解的形式来调用到后端的方法(先找到所有的注解的方法名和参数,然后再用反射的思想去调用)。所不同的是,没有视图,对writer对象进行了包装,从而后端方法可以返回好几种类型的对象。之所以没有用modelandview,我猜,是因为前后端分离的需要,另外html搭配js的静态页面速度相对较快的原因。
因此,我就试了试没有model的情况,使用MVC的@controller注解,使用@requestmapping指定后端的方法。
闲言少叙,贴代码。
首先,web-xml和chapter2-servlet.xml。注意web-xml过滤url时,<url-pattern>中如果想用*来匹配,一定要加上/,我要匹配request开头的url,所以写/request/*。后面controller的url是在这个基础上的url。也即,@requestMapping(value="/other")对应的地址应该是/localhost/firstMVC/request/other……这样的。
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>chapter2</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>chapter2</servlet-name>
<url-pattern>/request/*</url-pattern>
</servlet-mapping>
</web-app>
前端代码,就是先访问localhost/firstMVC/view/student.html这个页面(因为url不为request,所以不会对应servlet),这个页面会发送ajax请求,通过json的方式与后端通信。
<html>
<head>
<title>Spring MVC</title>
<script src="/firstMVC-0.0.1-SNAPSHOT/dist/js/jquery-1.11.1.min.js"></script>
<script src="/firstMVC-0.0.1-SNAPSHOT/dist/js/jquery.glide.min.js"></script>
<script src="/firstMVC-0.0.1-SNAPSHOT/script/student.js"></script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
number: <input type="text" name="id"/>
age: <input type="text" name="age"/>
name: <input type="text" name="username"/>
<input type="button" value="submit" id="submit"/>
</form>
</body>
</html>
js代码,最顶上的函数是用来将form表单转化为json,注意ajax中的请求url,一定是<url-pattern>中的再加上requestMapping中的地址。
后端controller代码,注意@requestMappiing的参数。对应ajax的地址和请求类型。jackson将json串转化为指定的对象。
package com.baidu.firstMVC.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.JsonParseException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping(value = "/other")
public class DemoController {
private Log logger = LogFactory.getLog(DemoController.class);
@RequestMapping(value = "/list",method = RequestMethod.GET)
@ResponseBody
public String getUserList() throws JsonGenerationException, JsonMappingException, IOException {
logger.info("列表");
List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId(1);
um.setUsername("sss");
um.setAge(22);
list.add(um);
Map<String,Object> modelMap = new HashMap<String,Object>(3);
modelMap.put("total","1");
modelMap.put("data",list);
modelMap.put("success","true");
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(modelMap);
return json;
}
@RequestMapping(value = "/request/add", method = RequestMethod.POST)
@ResponseBody
public String addUser(@RequestBody String json) throws JsonParseException, JsonMappingException, IOException {
logger.info("新增");
ObjectMapper mapper = new ObjectMapper();
logger.info(json);
UserModel um = mapper.readValue(json, UserModel.class);
Map<String, String> map = new HashMap<String, String>(1);
map.put("success", "true");
return mapper.writeValueAsString(map);
}
}
class UserModel {
private int id;
private String username;
private int age;
public void setId(int a) {
id = a;
}
public int getId() {
return id;
}
public void setUsername(String name) {
username = name;
}
public String getUsername() {
return username;
}
public void setAge(int age) {
this.age = age;
}
public int getAge() {
return age;
}
}
okay,只要在地址栏键入http://localhost/firstMVC-0.0.1-SNAPSHOT/view/student.html就可以进入了。
maven的配置:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>
<groupId>com.baidu.hello</groupId>
<artifactId>firstMVC</artifactId>
<properties>
<spring.version>4.2.0.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
</dependencies>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
</project>
因此,我就试了试没有model的情况,使用MVC的@controller注解,使用@requestmapping指定后端的方法。
闲言少叙,贴代码。
首先,web-xml和chapter2-servlet.xml。注意web-xml过滤url时,<url-pattern>中如果想用*来匹配,一定要加上/,我要匹配request开头的url,所以写/request/*。后面controller的url是在这个基础上的url。也即,@requestMapping(value="/other")对应的地址应该是/localhost/firstMVC/request/other……这样的。
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>chapter2</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>chapter2</servlet-name>
<url-pattern>/request/*</url-pattern>
</servlet-mapping>
</web-app>
<?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:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" 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.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <mvc:annotation-driven /> <context:component-scan base-package="com.baidu.firstMVC.controller" /> </beans>
前端代码,就是先访问localhost/firstMVC/view/student.html这个页面(因为url不为request,所以不会对应servlet),这个页面会发送ajax请求,通过json的方式与后端通信。
<html>
<head>
<title>Spring MVC</title>
<script src="/firstMVC-0.0.1-SNAPSHOT/dist/js/jquery-1.11.1.min.js"></script>
<script src="/firstMVC-0.0.1-SNAPSHOT/dist/js/jquery.glide.min.js"></script>
<script src="/firstMVC-0.0.1-SNAPSHOT/script/student.js"></script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
number: <input type="text" name="id"/>
age: <input type="text" name="age"/>
name: <input type="text" name="username"/>
<input type="button" value="submit" id="submit"/>
</form>
</body>
</html>
js代码,最顶上的函数是用来将form表单转化为json,注意ajax中的请求url,一定是<url-pattern>中的再加上requestMapping中的地址。
$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a,function() { if(o[this.name]) { if(!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $(document).ready(function() { $.ajax({ type: 'GET', contentType: 'application/json', url : '/firstMVC-0.0.1-SNAPSHOT/request/other/list', dataType : 'json', success : function(data) { if(data && data.success == "true") { $('#info').html("there are " + data.total + " line data.<br/>"); $.each(data.data,function(i,item) { $('#info').append( "number: " + item.id + ",name:" + item.username + ",age:" + item.age); }) } }, error : function(){ alert("error"); } }); $("#submit").bind("click",function(){ var jsonuserinfo = $('f 4000 orm').serializeObject(); var json = JSON.stringify(jsonuserinfo); $.ajax({ type : 'post', contentType : 'application/json', url : '/firstMVC-0.0.1-SNAPSHOT/request/other/request/add', data : json, dataType : 'json', success : function(data) { alert("add success"); }, error : function(data) { alert("error"); } }) }); })
后端controller代码,注意@requestMappiing的参数。对应ajax的地址和请求类型。jackson将json串转化为指定的对象。
package com.baidu.firstMVC.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.JsonParseException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping(value = "/other")
public class DemoController {
private Log logger = LogFactory.getLog(DemoController.class);
@RequestMapping(value = "/list",method = RequestMethod.GET)
@ResponseBody
public String getUserList() throws JsonGenerationException, JsonMappingException, IOException {
logger.info("列表");
List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId(1);
um.setUsername("sss");
um.setAge(22);
list.add(um);
Map<String,Object> modelMap = new HashMap<String,Object>(3);
modelMap.put("total","1");
modelMap.put("data",list);
modelMap.put("success","true");
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(modelMap);
return json;
}
@RequestMapping(value = "/request/add", method = RequestMethod.POST)
@ResponseBody
public String addUser(@RequestBody String json) throws JsonParseException, JsonMappingException, IOException {
logger.info("新增");
ObjectMapper mapper = new ObjectMapper();
logger.info(json);
UserModel um = mapper.readValue(json, UserModel.class);
Map<String, String> map = new HashMap<String, String>(1);
map.put("success", "true");
return mapper.writeValueAsString(map);
}
}
class UserModel {
private int id;
private String username;
private int age;
public void setId(int a) {
id = a;
}
public int getId() {
return id;
}
public void setUsername(String name) {
username = name;
}
public String getUsername() {
return username;
}
public void setAge(int age) {
this.age = age;
}
public int getAge() {
return age;
}
}
okay,只要在地址栏键入http://localhost/firstMVC-0.0.1-SNAPSHOT/view/student.html就可以进入了。
maven的配置:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>
<groupId>com.baidu.hello</groupId>
<artifactId>firstMVC</artifactId>
<properties>
<spring.version>4.2.0.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>3.1.1.RELEASE</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
</dependencies>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
</project>
相关文章推荐
- 集成SVN插件到eclipse
- Java图片合成,压缩
- java 常用工具类
- hadoop2.6.3学习第三节:win7+myeclipse2014配置开发环境,和运行WordCount
- java 正则
- Java Mail 530 5.7.1 Client was not authenticated 错误解决
- hdu 1850 Being a Good Boy in Spring Festival
- eclipse安装svn插件
- 用eclipse创建WebService项目
- Spring缓存注解@Cache使用
- JAVA FTP文件上传下载删除
- 关于spring配置中the prefix "tx" for element "tx:annotation-driven" is not bound 问题的处理
- 使用Eclipse将Android项目打Jar包
- Java C# 加密解密类库
- mybatis与spring整合
- Proguard混淆代码导致Spring自动装配失败
- java 加密工具类(MD5、RSA、AES等加密方式)
- Struts2+Spring集成中Action的管理
- Spring 构造系统UI资源
- Spring 基于事件的通信