1. 与缓存的结合
在spring的配置文件中加入
<!-- 缓存的管理器 -->
<bean id="cacheManager" class="org.springframework.cache.concurrent.ConcurrentMapCacheManager">
<!-- 管理缓存区域 -->
<property name="cacheNames">
<list>
<value>user</value>
<value>order</value>
<value>product</value>
</list>
</property>
</bean>
<!-- 启用缓存相关的注解及支持
@Cacheable
@CacheEvict
@CachePut
-->
<cache:annotation-driven/>
注解的使用
@Cacheable(cacheNames = “缓存区名字”) 加在方法上
检查缓存内容
如果缓存中没有，就把方法结果存入缓存，
如果缓存中有，就直接返回内容，不会执行方法
@CacheEvict(cacheNames = “缓存名字”, allEntries = true) 加在方法上
让某个缓存的内容失效
@CachePut(cacheNames = “user”) 加在方法上
总会执行方法，用方法的返回结果更新缓存
2. ajax
页面无刷新技术，在页面不刷新的情况下与服务器进行交互
关键：javascript中的对象：XMLHttpRequest
-
创建XMLHttpRequest
var xhr = new XMLHttpRequest(); -
发送请求
xhr.open(“get|post|put|delete”, 请求url地址, true|false);
xhr.send(); // 真正发送请求 -
接收响应
xhr.responseText -
转换json
如果服务器返回的是json结果，需要用JSON.parse 将其转为js对象
同步请求和异步请求
open(“请求方式”, “url”, 异步or同步)
true ==> 异步请求, send() 不会等待响应返回，请求发送后立刻结束
false ==> 同步请求 , send()会一直等待到响应返回后，send才会结束
异步请求下接收响应
// 响应返回时会触发onload时间
xhr.onload = function(){
xhr.responseText
}
// 旧的接收响应
xhr.onreadystatechange() {
if(xhr.readyState==4) { // 当readyState属性值为4时才是响应触发的
xhr.responseText
}
}
发送post请求
xhr.open("post", "请求url", true);
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded"); // 指表单格式 名=值&名=值
xhr.setRequestHeader("content-type", "multipart/form-data"); // 指多部分表单格式（常用于上传文件）
xhr.setRequestHeader("content-type", "application/json"); // 指是json字符串 {属性名:属性值}
xhr.send("内容");
JSON.stringfy(js对象) ==> json 字符串
@RequestMapping // @RequestBody用来接收请求体是json字符串的情况
public void 控制器方法(@RequestBody User user) {
}
无刷新上传文件
var xhr = ...
var formData = new FormData(document.getElementById("表单id"))
xhr.send(formData);
发送时请求体格式 multipart/form-data 所以服务器需要配置文件上传解析器，即：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>
图片文件的预览
var fileInput = document.getElementById("文件上传框id");
// fileInput.files; 获取所有选中的文件
var file = fileInput.files[0];
var fileReader = new FileReader();
fileReader.onload = function(){
document.geElementById("图片框的id").src = fileReader.result; // 得到读取结果, 把它赋值给img的src;
fileReader.read(file);
2. 采用第三方库发送ajax请求
2.1 jquery中使用ajax
$.ajax({
url:"请求url地址",
type:"get|post|put|delete",
data:"请求参数",
dataType:"服务器返回的响应格式，一般不用设置", 取值// json,html,text,xml..
success: function(结果){}, // 响应成功后调用的函数
error: function(){}, // 请求和响应过程中出错了调用的函数
});
$.get("请求url地址", "请求参数").done(function(结果){}).fail(function(xhr){});
// done 是成功时的回调函数， fail是失败时的回调函数
$.post("请求url地址", "请求参数").done(function(结果){});
2.2 ajax中的注意事项
ajax默认不支持跨域调用 (不同的域名，不同ip之间 默认不可以使用ajax来发送请求接收响应)
192.168.10.240
controller
192.168.10.100 另一台机器
$.ajax
xhr
要支持跨域
方法1：jsonp 方式 需要服务器端的配合
方法2：cors 方式
ajax的应用：省市县联动
基于上篇ssm环境开发，将环境配好，就可以专注于开发。
先准备一张省市县的表
region表结构
我们只取关键的几个列，写实体类
Region.java
package com.westos.domain;
public class Region {
private Integer regionId;
private String regionName;
private Integer parentId;
public Integer getRegionId() {
return regionId;
}
public void setRegionId(Integer regionId) {
this.regionId = regionId;
}
public String getRegionName() {
return regionName;
}
public void setRegionName(String regionName) {
this.regionName = regionName;
}
public Integer getParentId() {
return parentId;
}
public void setParentId(Integer parentId) {
this.parentId = parentId;
}
}
从下往上写，先写接口mapper，管理数据库操作
RegionMapper.java
package com.westos.mapper;
import com.westos.domain.Region;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface RegionMapper {
public List<Region> findByParentId(int parentId);
}
由于实体类中遵循驼峰命名，所以属性名与数据库列名不对应，所以我们要写mybatis的映射文件，mapper接口和mapper配置文件要对应起来，需要包名，文件名一致，具体看spring与mybatis整合。
RegionMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.westos.mapper.RegionMapper">
<select id="findByParentId" parameterType="int" resultMap="aaa">
select region_id,region_name,parent_id from region where parent_id=#{parentId}
</select>
<resultMap id="aaa" type="com.westos.domain.Region">
<!-- column="列名" property="属性名" -->
<id column="region_id" property="regionId"></id>
<result column="region_name" property="regionName"></result>
<result column="parent_id" property="parentId"></result>
</resultMap>
</mapper>
业务代码：
RegionService.java
package com.westos.service;
import com.westos.domain.Region;
import com.westos.mapper.RegionMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.xml.ws.Action;
import java.util.List;
@Service
public class RegionService {
@Autowired
private RegionMapper regionMapper;
public List<Region> findByParentId(int parentId){
return regionMapper.findByParentId(parentId);
}
}
控制器：
RegionController.java
package com.westos.controller;
import com.westos.domain.Region;
import com.westos.service.RegionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class RegionController {
@Autowired
private RegionService regionService;
@RequestMapping("/findByParentId")
@ResponseBody //返回json类型数据
public List<Region> find(int parentId){
return regionService.findByParentId(parentId);
}
}
视图
region.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
省 <select id="sheng" onchange="findShi()"></select> 市<select id="shi" onchange="findXian()"></select> 县 <select id="xian"></select>
<script>
findSheng();
function findSheng() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var list = JSON.parse(xhr.responseText);
var sheng = document.getElementById("sheng");
for(var i = 0; i < list.length; i++){
//console.log(list[i]);
var option = document.createElement("option");
option.value = list[i].regionId;
option.innerText = list[i].regionName;
sheng.appendChild(option); // 建立select和option之间的父子关系
}
findShi();
};
xhr.open("get", "/findByParentId?parentId=1", true);
xhr.send();
}
function findShi() {
var id = document.getElementById("sheng").value; // 获取选中的城市编号值
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var list = JSON.parse(xhr.responseText);
var shi = document.getElementById("shi");// 获得了市的下拉列表
// 清除 下拉列表
// var options = shi.getElementsByTagName("option");
// 错误的做法,这样清不干净，因为每删除一个option，下一个会自动前移
/*for (var i = 0; i < options.length; i++) {
shi.removeChild(options[i]);
}*/
// 正确的做法
/*while(options.length>0) {
shi.removeChild(options[0]);
}*/
// 简单的做法
shi.innerHTML = "";
for(var i = 0; i < list.length; i++){
var option = document.createElement("option");
option.value = list[i].regionId;
option.innerText = list[i].regionName;
shi.appendChild(option);
}
findXian();
};
xhr.open("get", "/findByParentId?parentId="+id, true);
xhr.send();
}
function findXian() {
var id = document.getElementById("shi").value;
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var list = JSON.parse(xhr.responseText);
var xian = document.getElementById("xian");
xian.innerHTML = "";
for(var i = 0; i < list.length; i++){
var option = document.createElement("option");
option.value = list[i].regionId;
option.innerText = list[i].regionName;
xian.appendChild(option);
}
};
xhr.open("get", "/findByParentId?parentId="+id, true);
xhr.send();
}
</script>
</body>
</html>
扫一扫
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
