spring MVC与ajax通信

最近在自学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>

<?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 = $('form').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>

spring MVC与ajax通信

Wireshark 安装+使用（一）

ibatis學習（入門）

spring MVC與ajax通信

cglib動態代理模式

談談雙親委派

動態代理實現超時和降級

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結