名雕装饰公司的口碑怎样,aso优化软件,广东个人网站备案,重庆渝中区企业网站建设哪家好注#xff1a;此为笔者学习狂神说SpringMVC的笔记#xff0c;其中包含个人的笔记和理解#xff0c;仅做学习笔记之用#xff0c;更多详细资讯请出门左拐B站#xff1a;狂神说!!!
11、Ajax初体验
1、伪造Ajax 结果#xff1a;并未有xhr异步请求 !DOCTYPE html
此为笔者学习狂神说SpringMVC的笔记其中包含个人的笔记和理解仅做学习笔记之用更多详细资讯请出门左拐B站狂神说!!!
11、Ajax初体验
1、伪造Ajax 结果并未有xhr异步请求 !DOCTYPE html
html
head langenmeta charsetUTF-8titlekuangshen/title
/head
bodyscript typetext/javascriptwindow.onload function(){var myDate new Date();document.getElementById(currentTime).innerText myDate.getTime();};function LoadPage(){var targetUrl document.getElementById(url).value;console.log(targetUrl);document.getElementById(iframePosition).src targetUrl;}/scriptdivp请输入要加载的地址span idcurrentTime/span/ppinput idurl typetext valuehttps://www.baidu.com//input typebutton value提交 onclickLoadPage()/p
/divdivh3加载页面位置/h3iframe idiframePosition stylewidth: 100%;height: 500px;/iframe
/div/body
/html2、利用AJAX可以做
注册时输入用户名自动检测用户是否已经存在。登陆时提示用户名密码错误删除数据行时将行ID发送到后台后台在数据库中删除数据库删除成功后在页面DOM中将数据行也删除。…等等
3、jQuery.ajax
纯JS原生实现Ajax我们不去讲解这里直接使用jquery提供的方便学习和使用避免重复造轮子有兴趣的同学可以去了解下JS原生XMLHttpRequest
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery 不是生产者而是大自然搬运工。
jQuery Ajax本质就是 XMLHttpRequest对他进行了封装方便调用
下载jQuery 导入jQuery静态资源 需要考虑到不到的进来的问题
1、jQuery.ajax参考
jQuery.ajax(...)部分参数url请求地址type请求方式GET、POST1.9.0之后用methodheaders请求头data要发送的数据contentType即将发送信息至服务器的内容编码类型(默认: application/x-www-form-urlencoded; charsetUTF-8)async是否异步timeout设置请求超时时间毫秒beforeSend发送请求前执行的函数(全局)complete完成之后执行的回调函数(全局)success成功之后执行的回调函数(全局)error失败之后执行的回调函数(全局)accepts通过请求头发送给服务器告诉服务器当前客户端可接受的数据类型dataType将服务器端返回的数据转换成指定类型xml: 将服务器端返回的内容转换成xml格式text: 将服务器端返回的内容转换成普通文本格式html: 将服务器端返回的内容转换成普通文本格式在插入DOM中时如果包含JavaScript标签则会尝试去执行。script: 尝试将返回值当作JavaScript去执行然后再将服务器端返回的内容转换成普通文本格式json: 将服务器端返回的内容转换成相应的JavaScript对象jsonp: JSONP 格式使用 JSONP 形式调用函数时如 myurl?callback? jQuery 将自动替换 ? 为正确的函数名以执行回调函数2、焦点事件测试
1、配置web.xml 和 springmvc的配置文件复制上面案例的即可 【记得静态资源过滤和注解驱动配置上】
?xml version1.0 encodingUTF-8?
beans xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxmlns:mvchttp://www.springframework.org/schema/mvcxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd!-- 自动扫描指定的包下面所有注解类交给IOC容器管理 --context:component-scan base-packagecom.kuang.controller/mvc:default-servlet-handler /mvc:annotation-driven /!-- 视图解析器 --bean classorg.springframework.web.servlet.view.InternalResourceViewResolveridinternalResourceViewResolver!-- 前缀 --property nameprefix value/WEB-INF/jsp/ /!-- 后缀 --property namesuffix value.jsp //bean/beans2、理解Ajax源码 3、后端Ajax的controller Controller
public class AjaxController {RequestMapping(/a1)public void ajax1(String name , HttpServletResponse response) throws IOException {if (admin.equals(name)){response.getWriter().print(true);}else{response.getWriter().print(false);}}}4、前端Ajax
导入jquery 可以使用在线的CDN 也可以下载导入
script srchttps://code.jquery.com/jquery-3.1.1.min.js/script
script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/script% page contentTypetext/html;charsetUTF-8 languagejava %
htmlheadtitle$Title$/title%--script srchttps://code.jquery.com/jquery-3.1.1.min.js/script--%script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction a1(){$.post({url:${pageContext.request.contextPath}/a1,data:{name:$(#txtName).val()},success:function (data,status) {alert(data);alert(status);}});}/script/headbody%--onblur失去焦点触发事件--%
用户名:input typetext idtxtName οnblura1()//body
/html效果出现异步请求 3、Ajax原理图分析 理解测试 效果 总结
Ajax实现了前后端分离发送xhr异步请求
4、 Springmvc实现Ajax
1、后端controller RequestMapping(/a2)
public ListUser ajax2(){ListUser list new ArrayListUser();list.add(new User(秦疆1号,3,男));list.add(new User(秦疆2号,3,男));list.add(new User(秦疆3号,3,男));return list; //由于RestController注解将list转成json格式返回
}2、前端Ajax 效果 实体类user
Data
AllArgsConstructor
NoArgsConstructor
public class User {private String name;private int age;private String sex;}% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/title
/head
body
input typebutton idbtn value获取数据/
table width80% aligncentertrtd姓名/tdtd年龄/tdtd性别/td/trtbody idcontent/tbody
/tablescript src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/script
script$(function () {$(#btn).click(function () {$.post(${pageContext.request.contextPath}/a2,function (data) {console.log(data)var html;for (var i 0; i data.length ; i) {html tr td data[i].name /td td data[i].age /td td data[i].sex /td /tr}$(#content).html(html);});})})
/script
/body
/html5、Ajax注册提示效果
1、后端controller RequestMapping(/a3)
public String ajax3(String name,String pwd){String msg ;//模拟数据库中存在数据if (name!null){if (admin.equals(name)){msg OK;}else {msg 用户名输入错误;}}if (pwd!null){if (123456.equals(pwd)){msg OK;}else {msg 密码输入有误;}}return msg; //由于RestController注解将msg转成json格式返回
}由于RestController注解将msg转成json格式返回
2、设置处理json乱码
不处理会出现无法返回json字符串的问题传的是乱码无法接收 3、前端jsp页面 % page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleajax/titlescript src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction a1(){$.post({url:${pageContext.request.contextPath}/a3,data:{name:$(#name).val()},success:function (data) {if (data.toString()OK){$(#userInfo).css(color,green);}else {$(#userInfo).css(color,red);}$(#userInfo).html(data);}});}function a2(){$.post({url:${pageContext.request.contextPath}/a3,data:{pwd:$(#pwd).val()},success:function (data) {if (data.toString()OK){$(#pwdInfo).css(color,green);}else {$(#pwdInfo).css(color,red);}$(#pwdInfo).html(data);}});}/script
/head
body
p用户名:input typetext idname οnblura1()/span iduserInfo/span
/p
p密码:input typetext idpwd οnblura2()/span idpwdInfo/span
/p
/body
/html效果 6、 获取baidu接口Demo
测试一下
!DOCTYPE HTML
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8titleJSONP百度搜索/titlestyle#q{width: 500px;height: 30px;border:1px solid #ddd;line-height: 30px;display: block;margin: 0 auto;padding: 0 10px;font-size: 14px;}#ul{width: 520px;list-style: none;margin: 0 auto;padding: 0;border:1px solid #ddd;margin-top: -1px;display: none;}#ul li{line-height: 30px;padding: 0 10px;}#ul li:hover{background-color: #f60;color: #fff;}/stylescript// 2.步骤二// 定义demo函数 (分析接口、数据)function demo(data){var Ul document.getElementById(ul);var html ;// 如果搜索数据存在 把内容添加进去if (data.s.length) {// 隐藏掉的ul显示出来Ul.style.display block;// 搜索到的数据循环追加到li里for(var i 0;idata.s.length;i){html lidata.s[i]/li;}// 循环的li写入ulUl.innerHTML html;}}// 1.步骤一window.onload function(){// 获取输入框和ulvar Q document.getElementById(q);var Ul document.getElementById(ul);// 事件鼠标抬起时候Q.onkeyup function(){// 如果输入框不等于空if (this.value ! ) {// ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆// 创建标签var script document.createElement(script);//给定要跨域的地址 赋值给src//这里是要请求的跨域的地址 我写的是百度搜索的跨域地址script.src https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wdthis.valuecbdemo;// 将组合好的带src的script标签追加到body里document.body.appendChild(script);}}}/script
/headbody
input typetext idq /
ul idul/ul
/body
/html7、Ajax再窥探
**AJAX ** 1创建 XMLHttpRequest 对象 AJAX 的核心是使用 XMLHttpRequest 对象来与服务器进行数据交互。在 JavaScript 中可以通过以下代码创建一个 XMLHttpRequest 对象
var xhr new XMLHttpRequest();2)定义回调函数 在 AJAX 中通常需要定义回调函数来处理服务器响应。回调函数将在异步请求完成时被触发。例如
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {// 处理服务器响应的逻辑}
};
3)配置请求参数 使用 open 方法配置请求的类型GET 或 POST和 URL
xhr.open(GET, example.com/data, true);如果是 POST 请求还需要设置请求头
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);4)发送请求 使用 send 方法发送请求
xhr.send();如果是 POST 请求需要传递请求体数据
xhr.send(param1value1param2value2);示例 考虑一个简单的例子通过 AJAX 获取服务器上的 JSON 数据并在页面上显示。以下是一个基于纯 JavaScript 的简单实例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX Example/title
/head
bodyh1Fetch Data using AJAX/h1div iddata-container/divscriptvar xhr new XMLHttpRequest();xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {var responseData JSON.parse(xhr.responseText);displayData(responseData);}};xhr.open(GET, https://jsonplaceholder.typicode.com/todos/1, true);xhr.send();function displayData(data) {var dataContainer document.getElementById(data-container);dataContainer.innerHTML pUser ID: data.userId /p pTitle: data.title /p pCompleted: data.completed /p;}/script
/body
/html
在这个例子中通过 AJAX 获取了一个 JSON 数据这里使用的是 JSONPlaceholder 提供的模拟数据然后在页面上显示了一些信息。XHR对象的onreadystatechange事件在状态发生变化时被触发当状态为4请求完成且状态码为200成功时通过JSON.parse解析响应的 JSON 数据并调用displayData函数展示在页面上。
12、SpringMVC拦截器
SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。
过滤器与拦截器的区别拦截器是AOP思想的具体应用。
过滤器
servlet规范中的一部分任何java web工程都可以使用在url-pattern中配置了**/***之后可以对所有要访问的资源进行拦截
拦截器
拦截器是SpringMVC框架自己的只有使用了SpringMVC框架的工程才能使用拦截器只会拦截访问的控制器方法 如果访问的是jsp/html/css/image/js是不会进行拦截的
1、简单使用拦截器
1、查看源码 2、拦截器类 package com.kuang.interceptor;import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class MyInterceptor implements HandlerInterceptor {//在请求处理的方法之前执行//如果返回true执行下一个拦截器//如果返回false就不执行下一个拦截器public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {System.out.println(------------处理前------------);return true;}//在请求处理方法执行之后执行public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {System.out.println(------------处理后------------);}//在dispatcherServlet处理后执行,做清理工作.public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {System.out.println(------------清理------------);}
}3、拦截器配置 !--关于拦截器的配置--
mvc:interceptorsmvc:interceptor!--/** 包括路径及其子路径--!--/admin/* 拦截的是/admin/add等等这种 , /admin/add/user不会被拦截--!--/admin/** 拦截的是/admin/下的所有--mvc:mapping path/**/!--bean配置的就是拦截器--bean classcom.kuang.interceptor.MyInterceptor//mvc:interceptor
/mvc:interceptors4、controller
package com.kuang.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;//测试拦截器的控制器
Controller
public class InterceptorController {RequestMapping(/interceptor)ResponseBodypublic String testFunction() {System.out.println(控制器中的方法执行了);return hello;}
}效果 2、 验证用户是否登录 (认证用户)
实现思路
1、有一个登陆页面需要写一个controller访问页面。
2、登陆页面有一提交表单的动作。需要在controller中处理。判断用户名密码是否正确。如果*正确向session中写入用户信息。返回登陆成功。*
3、拦截用户请求判断用户是否登陆。如果用户已经登陆。放行 如果用户未登陆跳转到登陆页面
①拦截器是springmvc才有的配置在这里需要注册 ②login页面 action“${PageContext.request.ContextPath}/user/login”
③LoginController ④外部页面index ⑤首页main ⑥设置拦截器拦截和放行的请求 在发出goLogin请求之后会被放行到login页面如果前端没有提交login请求后端将无法接收到login请求也就无法设置session让用户登录
第一次登录没有session情况下不允许进入首页main同时其他情况都直接转发到login页面
注后端发送请求给前端除了重定向之外都会跳到前端的页面前端发送请求给后端可能会被拦截
效果 13、 文件上传和下载
1、文件上传
1、前期准备
文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传但是SpringMVC上下文中默认没有装配MultipartResolver因此默认情况下其不能处理文件上传工作。如果想使用Spring的文件上传功能则需要在上下文中配置MultipartResolver。
前端表单要求为了能上传文件必须将表单的method设置为POST并将enctype设置为multipart/form-data。只有在这样的情况下浏览器才会把用户选择的文件以二进制数据发送给服务器
对表单中的 enctype 属性做个详细的说明
application/x-wwwform-urlencoded默认方式只处理表单域中的 value 属性值采用这种编码方式的表单会将表单域中的值处理成 URL 编码方式。(即?usernameapasswordb)multipart/form-data这种编码方式会以二进制流的方式来处理表单数据这种编码方式会把文件域指定文件的内容也封装到请求参数中不会对字符编码。text/plain除了把空格转换为 “” 号外其他字符都不做编码处理这种方式适用直接通过表单发送邮件。
form action enctypemultipart/form-data methodpostinput typefile namefile/input typesubmit
/form一旦设置了enctype为multipart/form-data浏览器即会采用二进制流的方式来处理表单数据而对于文件上传的处理则涉及在服务器端解析原始的HTTP响应。在2003年Apache Software Foundation发布了开源的Commons FileUpload组件其很快成为Servlet/JSP程序员上传文件的最佳选择。
Servlet3.0规范已经提供方法来处理文件上传但这种上传需要在Servlet中完成。而Spring MVC则提供了更简单的封装。Spring MVC为文件上传提供了直接的支持这种支持是用即插即用的MultipartResolver实现的。Spring MVC使用Apache Commons FileUpload技术实现了一个MultipartResolver实现类CommonsMultipartResolver。因此SpringMVC的文件上传还需要依赖Apache Commons FileUpload的组件。
2、具体操作
①导入jar包 !--文件上传--
dependencygroupIdcommons-fileupload/groupIdartifactIdcommons-fileupload/artifactIdversion1.3.3/version
/dependency
!--servlet-api导入高版本的--
dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion4.0.1/version
/dependency②配置beanmultipartResolver
【注意这个bena的id必须为multipartResolver 否则上传文件会报400的错误在这里栽过坑,教训】 !--文件上传配置--
bean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver!-- 请求的编码格式必须和jSP的pageEncoding属性一致以便正确读取表单的内容默认为ISO-8859-1 --property namedefaultEncoding valueutf-8/!-- 上传文件大小上限单位为字节1048576010M --property namemaxUploadSize value10485760/property namemaxInMemorySize value40960/
/beanCommonsMultipartFile 的 常用方法
String getOriginalFilename()获取上传文件的原名InputStream getInputStream()获取文件流void transferTo(File dest)将上传文件保存到一个目录文件中
③前端页面 ④Controller
package com.kuang.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.*;Controller
public class FileController {//RequestParam(file) 将namefile控件得到的文件封装成CommonsMultipartFile 对象//批量上传CommonsMultipartFile则为数组即可RequestMapping(/upload)public String fileUpload(RequestParam(file) CommonsMultipartFile file , HttpServletRequest request) throws IOException {//获取文件名 : file.getOriginalFilename();String uploadFileName file.getOriginalFilename();//如果文件名为空直接回到首页if (.equals(uploadFileName)){return redirect:/index.jsp;}System.out.println(上传文件名 : uploadFileName);//上传路径保存设置String path request.getServletContext().getRealPath(/upload);//如果路径不存在创建一个File realPath new File(path);if (!realPath.exists()){realPath.mkdir();}System.out.println(上传文件保存地址realPath);InputStream is file.getInputStream(); //文件输入流OutputStream os new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流//读取写出int len0;byte[] buffer new byte[1024];while ((lenis.read(buffer))!-1){os.write(buffer,0,len);os.flush();}os.close();is.close();return redirect:/index.jsp;}
}⑤采用file.Transto 来保存上传的文件的controller
效果和上面一样
/*
* 采用file.Transto 来保存上传的文件
*/
RequestMapping(/upload2)
public String fileUpload2(RequestParam(file) CommonsMultipartFile file, HttpServletRequest request) throws IOException {//上传路径保存设置String path request.getServletContext().getRealPath(/upload);File realPath new File(path);if (!realPath.exists()){realPath.mkdir();}//上传文件地址System.out.println(上传文件保存地址realPath);//通过CommonsMultipartFile的方法直接写文件注意这个时候file.transferTo(new File(realPath / file.getOriginalFilename()));return redirect:/index.jsp;
}代码可以直接拿来复用
2、文件下载
文件下载步骤
1、设置 response 响应头
2、读取文件 – InputStream
3、写出文件 – OutputStream
4、执行操作
5、关闭流 先开后关 RequestMapping(value/download)
public String downloads(HttpServletResponse response ,HttpServletRequest request) throws Exception{//要下载的图片地址String path request.getServletContext().getRealPath(/upload);String fileName 基础语法.jpg;//1、设置response 响应头response.reset(); //设置页面不缓存,清空bufferresponse.setCharacterEncoding(UTF-8); //字符编码response.setContentType(multipart/form-data); //二进制传输数据//设置响应头response.setHeader(Content-Disposition,attachment;fileNameURLEncoder.encode(fileName, UTF-8));File file new File(path,fileName);//2、 读取文件--输入流InputStream inputnew FileInputStream(file);//3、 写出文件--输出流OutputStream out response.getOutputStream();byte[] buff new byte[1024];int index0;//4、执行 写出操作while((index input.read(buff))! -1){out.write(buff, 0, index);out.flush();}out.close();input.close();return null;
}前端
a href/download点击下载/a14、总结 SpringMVC学习与开发(四)的学习笔记到此完结笔者归纳、创作不易大佬们给个3连再起飞吧
