搭建SpringMVC、利用ajax实现级联操作

一、框架技术：封装的一整套结构(方案)，称之为一个框架

1、ssm---SpringMVC Spring Mybatis--->ibatis

2、springBoot---ssm的简便写法---微服务的基础

3、微服务

二、SpringMVC

1、目的：解决servlet技术问题，为处理servlet技术解决的一套方案

2、servlet存在的问题

• 利用率低，一个servlet只能处理一个请求
• 过多的servlet，容易造成路径混乱，维护也相对麻烦
• 处理请求数据，挨个提取参数，也比较麻烦

三、搭建SpringMVC

1、创建web项目----配置web.xml文件

（1）在WebContent----WEB-INF----lib下导入相关jar包

（2）配置在WebContent----WEB-INF----web.xml文件

DispatcherServlet（中央控制器）：管理流程，存储所有请求，负责调用controller，controller根据mapping执行方法，试图返回jsp给中央控制器，中央控制器把jsp返回给客户端作为响应

<!-- 配置springMVC核心控制器 -->
	<servlet>
		<servlet-name>spring</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>0</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>spring</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

设置默认页

<!-- 默认页 -->
	<welcome-file-list>
		<welcome-file>/index.jsp</welcome-file>
	</welcome-file-list>

统一配置jsp，解决路径问题

<jsp-config> 
		<jsp-property-group> 
			<url-pattern>*.jsp</url-pattern> 
			<include-prelude>/header.jsp</include-prelude> 
		</jsp-property-group> 
	</jsp-config>

处理中文乱码

<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>

2、配置在WebContent----WEB-INF下的springMVC的配置文件

   更改控制器类的包路径

<!-- 设置使用注解的类所在的包 -->
	<context:component-scan base-package="com.hqyj.controller"></context:component-scan>

3、创建包路径

com.hqyj.xxx---util、pojo、dao、service、controller

在src下创建jdbc.properties----用属性文件保存数据库信息

util----存放PropertyUtil.java，封装属性文件操作类

package com.hqyj.util;
/**
 * 数据库属性文件工具类
 * @author long907624
 *
 */

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class PropertyUtil {
	/**
	 * 数据库信息常量
	 */
	//驱动
	public static final String DRTVER = "mysql.driver";
	//路径
	public static final String URL = "mysql.url";
	public static final String UNAME = "mysql.uname";
	public static final String UPWD = "mysql.upwd";
	
	/**
	 * 属性文件操作工具
	 */	
	private static Properties ps = new Properties();
	
	/**
	 * 加载属性文件(类加载时就加载,先执行，只执行一次）
	 */
	static {
		InputStream in = PropertyUtil.class.getClassLoader().getResourceAsStream("jdbc.properties");
		try {
			//加载
			ps.load(in);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	/**
	 * 获取属性文件的属性信息
	 * @param pname 属性名
	 * @return 属性的值
	 * 通过其可获得：
	 * System.out.println(PropertyUtil.getProperty(PropertyUtil.UNAME))
	 */
	public static String getProperty(String pname) {
		return ps.getProperty(pname);
	}
}

pojo----存放实体类（数据库每张表的字段--Javabean封装）

dao----存放Basedao----解决获得连接的代码重复问题

                            ----数据库连接与关闭（getCon（）、closeCon（））

                            ----事务操作（beginTran()开启事务,手动提交；commitTran()没有异常，提交事务；rollbackTran()发生异常，回滚事务）

    ----存放实体类的dao并继承BaseDao，在这里写SQL语句，并通过getCon().prepareStatement(sql)获取PreparedStatement实例，通过setxxx()获取占位，通过executeUpdate()执行SQL语句

service----业务类，执行一个或多个dao方法，完成一块业务需求，在业务中保障事务的一致性

controller----接收客户端的请求，然后调用Service层业务逻辑，获取到数据，传递数据给视图层（客户端）                  

4、注解

注解一：@Controller

创建控制器类，注解在类上，注解代替了配置---初始化控制----对应servlet中的@WebServlet("/StudentInsert")

注解二：@RequestMapping

设置路径映射，用来映射Web请求（访问路径和参数）、处理类和方法

在类上，负责处理的，根目录下的URL ，/user/ 下的路径会被Controller所拦截

在方法上，负责处理/user/insert这个url下（post、get）传递过来的请求的请求

注解三：@Autowired

自动注入(赋值)，注入一个request对象

@Autowired
private HttpServletRequest request;

注解四：@ResponseBody

---用于ajax方法

---返回值是基本类型和字符串，返回的就是数据本身(原值)

---返回值是引用类型，返回的就是json

用ajax实现注册界面是否已经存在已有的主键以及下拉操作

/**
	 * 注册界面，ajax判断是否已经存在主键
	 * @param sid
	 * @return
	 */
	@RequestMapping("/selectAjax")
	@ResponseBody
	public ShengFen selectAjax(String sid) {
		ShengFen sf = null;
		
		try {
			//看是否传进来
			System.out.println("sid"+sid);
			sf = fs.selectOne(sid);
			//serviceDAo是否执行成功
			System.out.println(sf);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return sf;
	}
	/**
	 * 省份下拉展示
	 * @return
	 */
	@RequestMapping("/selectListAjax")
	@ResponseBody
	public ArrayList selectListAjax() {
		ArrayList list = null;
		try {
			 list = fs.selectList();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}

5、数据传递----获取请求数据

需要获取什么请求参数，方法中就定义对应的参数

传入的属性值必须和页面参数（name）一致

6、数据传递----转发数据

需要创建request属性，自动赋值

@Autowired
    private HttpServletRequest request;

例子：完成单表的增删改查

@Controller
@RequestMapping("/student")
public class StudentController {
	private StudentService ss = new StudentService();
	@Autowired
	private HttpServletRequest request;
	/**
	 * s对象的属性要和页面参数(name)一致
	 * @return string-----jsp路径（文件名）
	 */
	@RequestMapping("/insert")  //访问的URL路径--urlmapping
	//控制器命名
	public String insert(Student s) {
		try {
			ss.insert(s);
			System.out.println(s);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return "studentlist";
	}
	@RequestMapping("/update")
	public String update(Student s) {
		
		try {
			ss.update(s);
			System.out.println("s");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return "studentlist";
	}
	@RequestMapping("/delete")
	public String delete(int sid) {	
		try {
			ss.delete(sid);
			System.out.println("删除成功");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
		return "studentlist";
	}
	
	@RequestMapping("/selectOne")
	public String selectOne(int sid) {
		
		try {
			Student s = ss.selectOne(sid);
			request.setAttribute("s", s);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return "studentupdate";
	}
	
	@RequestMapping("/selectList")
	public String selectList() {
		try {
			ArrayList list = ss.selectList();
			request.setAttribute("list", list);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "studentlist";
	}
}

7、解决统一路径问题

控制器的映射路径不能重复，否则加载失败

为每个控制器设置根路径，各个方法路径不变

        相对路径---------不利于维护

        绝对路径√-------麻烦

 解决方法：

 1、新建一个header.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	System.out.println("project uri:" + path);
%>
<base href="<%=path%>/">

2、在web.xml中统一配置jsp

<jsp-config> 
		<jsp-property-group> 
			<url-pattern>*.jsp</url-pattern> 
			<include-prelude>/header.jsp</include-prelude> 
		</jsp-property-group> 
	</jsp-config>

四、SpringMVC实现ajax

1、原始的ajax

        1、创建ajax对象；2、设置回调函数；3、发送请求

（1）json---特殊的字符串---通用的格式---描述对象、集合

                对象：{"sid":5,"sname":"jojo"}---stu

                集合：[{"sid":5,"sname":"jojo"},{"sid":9,"sname":"admin"}]

（2）js

                对象：{sid:5,sname:"jojo"}---stu

                集合：[{sid:5,sname:"jojo"},{sid:9,sname:"admin"}]

（3）es6版本

        var sid = 3,sname = "jojo";

        简写---stu--{sid,sname}

        $.ajax(json);-----jQuery---写的少，做的多

利用ajax实现省份与城市下拉类表的级联操作

controller包下省份下拉展示代码见注解四

.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url: 'shengfen/selectListAjax',
			type: 'post',
			dataType: 'json',
			success : function(res) {
				$.each(res, function() {
					$("#sid").append(
							'<option value="'+this.sid+'">' + this.sname
									+ '</option>');
				})
			}
		})
		$("#sid").change(function(){
			$.ajax({
				url: 'chengshi/selectBySid',
				data: {sid: this.value},
				type: 'post',
				dataType: 'json',
				success : function(res) {
					$("#cid option:gt(0)" ).remove();
					$.each(res,function(){
						
						$("#cid").append('<option value="'+this.cid+'">' + this.cname
								+ '</option>');
					})
				}
			})
		})
	})

</script>
</head>
<body>
<form action="ShengfenController" method="post">
		<table>

			<tr>
				<td>省份：</td>
				<td><select id="sid" name="sid">
						<option value="">请选择</option>
				</select></td>

				<td>城市：</td>
				<td><select id="cid" name="cid">
						<option value="">请选择</option>
				</select></td>
			</tr>
		</table>

	</form>
</body>
</html>