Eclipse 使用maven创建springMVC+ajax项目完成前后台数据交互

一.在eclipse里创建maven-archetype-webapp项目
1.new—》other–》maven

2.默认下一步

3.选择maven-archetype-webapp

4.填写选项

5.完成之后目录如下

其中index.jsp报错"The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path",缺少servlet包，此时可以导入jar包解决
在pom.xml的dependencies中加入依赖包

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>

此时一个正常的maven项目就建好了

二.配置springMVC
1.在pom.xml中添加依赖

<profiles>
	<profile>
		<id>jdk-1.8</id>
		<activation>
			<activeByDefault>true</activeByDefault>
			<jdk>1.8</jdk>
		</activation>
		<properties>
			<maven.compiler.source>1.8</maven.compiler.source>
			<maven.compiler.target>1.8</maven.compiler.target>
			<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
		</properties>
	</profile>
</profiles>

  <properties>
      <spring.version>4.1.1.RELEASE</spring.version>
  </properties>
  
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    
     <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>${
    
    spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>${
    
    spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${
    
    spring.version}</version>
    </dependency>
    
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    
    <!-- 单元测试 -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.11</version>
		</dependency>

		<!-- 1.日志 -->
		<!-- 实现slf4j接口并整合 -->
		<dependency>
			<groupId>ch.qos.logback</groupId>
			<artifactId>logback-classic</artifactId>
			<version>1.1.1</version>
		</dependency>

		<!-- 2.数据库 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.37</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>c3p0</groupId>
			<artifactId>c3p0</artifactId>
			<version>0.9.1.2</version>
		</dependency>

		<!-- DAO: MyBatis -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.3.0</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.2.3</version>
		</dependency>

		<!-- 3.Servlet web -->
		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.5.4</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
		</dependency>

		<!-- 4.Spring -->
		<!-- 1)Spring核心 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<!-- 2)Spring DAO层 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<!-- 3)Spring web -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<!-- 4)Spring test -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>

		<!-- redis客户端:Jedis -->
		<dependency>
			<groupId>redis.clients</groupId>
			<artifactId>jedis</artifactId>
			<version>2.7.3</version>
		</dependency>
		<dependency>
			<groupId>com.dyuproject.protostuff</groupId>
			<artifactId>protostuff-core</artifactId>
			<version>1.0.8</version>
		</dependency>
		<dependency>
			<groupId>com.dyuproject.protostuff</groupId>
			<artifactId>protostuff-runtime</artifactId>
			<version>1.0.8</version>
		</dependency>

		<!-- Map工具类 -->
		<dependency>
			<groupId>commons-collections</groupId>
			<artifactId>commons-collections</artifactId>
			<version>3.2</version>
		</dependency>

2.编辑web.xml内容

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
		<servlet-name>mvc-dispatcher</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<!-- 配置springMVC需要加载的配置文件
			spring-dao.xml,spring-service.xml,spring-web.xml
			Mybatis - > spring -> springmvc
		 -->
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/spring-*.xml</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>mvc-dispatcher</servlet-name>
		<!-- 默认匹配所有的请求 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

在src/main/resources下创建spring文件夹，spring文件夹下创建spring-web.xml

spring-web.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: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-3.0.xsd">
	<!-- 配置SpringMVC -->
	<!-- 1.开启SpringMVC注解模式 -->
	<!-- 简化配置： 
		(1)自动注册DefaultAnootationHandlerMapping,AnotationMethodHandlerAdapter 
		(2)提供一些列：数据绑定，数字和日期的format @NumberFormat, @DateTimeFormat, xml,json默认读写支持 
	-->
	<mvc:annotation-driven />
	
	<!-- 2.静态资源默认servlet配置
		(1)加入对静态资源的处理：js,gif,png
		(2)允许使用"/"做整体映射
	 -->
	 <mvc:default-servlet-handler/>
	 
	 <!-- 3.配置jsp 显示ViewResolver -->
	 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	 	<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
	 	<property name="prefix" value="/WEB-INF/jsp/" />
	 	<property name="suffix" value=".jsp" />
	 </bean>
	 
	 <!-- 4.扫描web相关的bean -->
	 <context:component-scan base-package="com.fwzs.web" />
</beans>

之后在java Rescources下创建src/main/java文件夹，

src/main/java文件夹下创建com.fwzs.model和com.fwzs.web包

然后在com.fwzs.model包下创建infoClass.java类和Result.java类
在com.fwzs.web包下创建BookController.java类

infoClass.java

package com.fwzs.model;
public class infoClass {
    
    
   private Long bookId;
   
   private Long studentId;
   
   private String username;
   
   private String username2;
public Long getBookId() {
    
    
	return bookId;
}
public void setBookId(Long bookId) {
    
    
	this.bookId = bookId;
}

public Long getStudentId() {
    
    
	return studentId;
}
public void setStudentId(Long studentId) {
    
    
	this.studentId = studentId;
}
public String getUsername() {
    
    
	return username;
}
public void setUsername(String username) {
    
    
	this.username = username;
}

public String getUsername2() {
    
    
	return username2;
}
public void setUsername2(String username2) {
    
    
	this.username2 = username2;
}
@Override
public String toString() {
    
    
	return "infoClass [bookId=" + bookId + ", studentId=" + studentId + ", username=" + username + ", username2="
			+ username2 + "]";
}
}

Result.java

package com.fwzs.model;

/**
 * 封装json对象，所有返回结果都使用它
 */
public class Result<T> {
    
    

	private boolean success;// 是否成功标志

	private T data;// 成功时返回的数据

	private String error;// 错误信息

	public Result() {
    
    
	}

	// 成功时的构造器
	public Result(boolean success, T data) {
    
    
		this.success = success;
		this.data = data;
	}

	// 错误时的构造器
	public Result(boolean success, String error) {
    
    
		this.success = success;
		this.error = error;
	}

	public boolean isSuccess() {
    
    
		return success;
	}

	public void setSuccess(boolean success) {
    
    
		this.success = success;
	}

	public T getData() {
    
    
		return data;
	}

	public void setData(T data) {
    
    
		this.data = data;
	}

	public String getError() {
    
    
		return error;
	}

	public void setError(String error) {
    
    
		this.error = error;
	}

	@Override
	public String toString() {
    
    
		return "JsonResult [success=" + success + ", data=" + data + ", error=" + error + "]";
	}

}

BookController.java

package com.fwzs.web;



import org.apache.ibatis.annotations.Param;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RequestParam;



import com.fwzs.model.*;
@Controller
@RequestMapping("/book") // url:/模块/资源/{id}/细分 /seckill/list
public class BookController {
    
    
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	private String list(Model model) {
    
    
		
		model.addAttribute("list", "ioioio");
		// list.jsp + model = ModelAndView
		return "list";// WEB-INF/jsp/"list".jsp
	}

	@RequestMapping(value = "/{bookId}/detail", method = RequestMethod.GET)
	private String detail(@PathVariable("bookId") Long bookId, Model model) {
    
    
		if (bookId == null) {
    
    
			return "redirect:/book/list";
		}
		
		model.addAttribute("book", "df");
		return "detail";
	}

	// ajax json
	@RequestMapping(value = "/{bookId}/appoint", method = RequestMethod.POST, produces = {
    
    
			"application/json; charset=utf-8" })
	@ResponseBody
	private Result<infoClass> appoint(@PathVariable("bookId") Long bookId, @RequestParam("studentId") Long studentId,@RequestParam("username") String username) {
    
    
		//if (studentId == null || studentId.equals("")) {
    
    
		//	return new Result<>(false, "学号不能为空");
		//}
		infoClass ad =new infoClass();
		ad.setBookId(bookId);
		ad.setStudentId(studentId);
		ad.setUsername(username);
		Result<infoClass> result=new Result<infoClass>();
		result.setData(ad);
		
		return result;
	}

}

在webapp目录下创建view文件夹，view创建login.html

login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


</head>

<body >


    
</body>
<script type="text/javascript">
  $.ajax({
    
    
	    type:"post",
	    url:"http://localhost:8080/zhongshen/book/45/appoint",
	    data:{
    
    "studentId":787878,"bookId":78787675,"username":"hxl"},
	    cache:false,
	    async:false,
	    success:function(fff)
	    {
    
    
	    	
	    },
	    error:function (XMLHttpRequest, textStatus, errorThrown) {
    
          
            alert(typeof(errorThrown));
        }
  }) ;
</script>
</html>

然后选择项目zhongshen右击run as --》maven clean

然后 run as–》maven install 成功后在target目录下创建了war包

最后运行login.html
控制台这里输出结果，完成了前后台数据交互