网站建设主持词,网站开发与设计实验报告总结,如何修改网页上的内容,怎么做自己的店铺网站JavaWeb入门6.0 1. Filter1.1 Filter快速入门1.2 Filter执行流程1.3 Filter拦截路径配置1.4 Filter过滤器链1.5 案例登录验证 2. Listener2.1 ServletContextListener使用 3. AJAX3.1 AJAX 快速入门3.2 案例 验证用户名是否存在3.3 Axios 异步框架3.3.1 Axios 快速入门3.3.2 Ax… JavaWeb入门6.0 1. Filter1.1 Filter快速入门1.2 Filter执行流程1.3 Filter拦截路径配置1.4 Filter过滤器链1.5 案例登录验证 2. Listener2.1 ServletContextListener使用 3. AJAX3.1 AJAX 快速入门3.2 案例 验证用户名是否存在3.3 Axios 异步框架3.3.1 Axios 快速入门3.3.2 Axios 请求方式别名 4. JSON4.1 JSON基础语法4.2 JSON数据和Java对象转换4.3 案例 品牌数据列表4.3.1 查询所有4.3.2 新增品牌 1. Filter
概念: Filter表示过滤器是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截下来从而实现一些特殊的功能。过滤器一般完成一些通用的操作比如权限控制、统一编码处理、敏感字符处理等等
1.1 Filter快速入门
定义类实现Filter接口并重写其所有方法
public class FilterDemo implements Filter {public void init(FilterConfig filterConfig)public void doFilter(ServletRequest request)public void destroy(){}
}配置Filter拦截资源的路径再类上定义WebFilter注解
WebFilter(/*)public class FilterDemo implements Filter {}在doFilter方法中输出一句话并放行 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {System.out.println(Filter....);//放行filterChain.doFilter(servletRequest,servletResponse);}例子
package com.itheima.web.filter;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;WebFilter(/*)
public class FilterDemo implements Filter{Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {System.out.println(FilterDemo...);//放行chain.doFilter(request,response);}Overridepublic void init(FilterConfig filterConfig) throws ServletException {}Overridepublic void destroy() {}
}
放行之后访问才成功 1.2 Filter执行流程 放行后访问对应资源资源访问完成后还会回到Filter中吗? 会 如果回到Filter中是重头执行还是执行放行后的逻辑呢? 放行后逻辑
1.3 Filter拦截路径配置 Filter 可以根据需求配置不同的拦截资源路径 WebFilter(/*)public class FilterDemo拦截具体的资源/index.jsp:只有访问index.jsp时才会被拦截。目录拦截/user/*:访问/user下的所有资源都会被拦截后缀名拦截 *.jsp:访问后缀名为jsp的资源都会被拦截拦截所有/*:访问所有资源都会被拦截
1.4 Filter过滤器链 一个Web应用可以配置多个过滤器这多个过滤器被称为过滤器链 注解配置的Filter优先级按照过滤器类名(字符串)的自然排序
1.5 案例登录验证 在brand-demo下LoginFilter
WebFilter(/*)
public class LoginFilter implements Filter {Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {HttpServletRequest req (HttpServletRequest) request;//判断访问资源路径是否和登录注册相关String[] urls {/login.jsp,/imgs,/css/,loginServlet,register.jsp,registerServlet,checkCodeServlet};//获取当前访问的资源路径String url req.getRequestURL().toString();//循环判断for (String u : urls) {if(url.contains(u)){//找到了就放行chain.doFilter(request,response);// break不能写return;}}//1.判断session中 userHttpSession session req.getSession();Object user session.getAttribute(user);//2.判断 user 是否为nullif(user!null){//登录过了//放行chain.doFilter(request, response);}else{//没有登录存储提示信息跳转到登录页面req.setAttribute(login_msg,您尚未登录);req.getRequestDispatcher(/login.jsp).forward(request,response);}}public void init(FilterConfig config) throws ServletException {}public void destroy() {}} 2. Listener
概念: Listener表示监听器是JavaWeb三大组件(Servlet、Filter、Listener)之一。监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件Listener分类: JavaWeb中提供了8个监听器
监听器分类监听器名称ValueServletContext监听ServletContextListener用于对ServletContext对象进行监听(创建、销毁)ServletContextAttributeListener对ServletContext对象中属性的监听(增删改属性)Session监听HttpsessionListener对Session对象的整体状态的监听创建、销毁)HttpSessionAttributeListener对Session对象中的属性监听(增删改属性)HttpSessionBindingListener监听对象于Session的绑定和解除HttpSessionActivationListener对Session数据的钝化和活化的监听Request监听ServletRequestListener对Request对象进行监听(创建、销毁)ServletRequestAttributeListener对Request对象中属性的监听增删改属性)
2.1 ServletContextListener使用
Listener的基本使用都是类似的掌握一个便可通类
定义类实现ServletContextListener接口
public class ContextLoaderListener implements ServletContextListener {/*** ServletContext对象被创建:整个web应用发布成功* param sce*/public void contextInitialized(ServletcintextEvent sce){}/** ServletContext对象被销毁:整个web应用卸载* param sce*/public void contextDestroyed(ServletContextEvent sce){}}
在类上添加WebListener注解
例子演示
package com.itheima.web.listener;import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;WebListener
public class ContexLoaderListener implements ServletContextListener {Overridepublic void contextInitialized(ServletContextEvent servletContextEvent) {//加载资源System.out.println( ContexLoaderListener ...);}Overridepublic void contextDestroyed(ServletContextEvent servletContextEvent) {//释放资源}
} 3. AJAX 概念: AJAX(Asynchronous JavaScript And XML)异步的JavaScript和XML AJAX作用: 与服务器进行数据交换:通过AJAX可以给服务器发送请求并获取服务器响应的数据 使用了AJAX和服务器进行通信就可以使用HTMLAJAX来替换JSP页面了 异步交互:可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如∶搜索联想、用户名是否可用校验等等… 同步和异步的概念
3.1 AJAX 快速入门 编写AjaxServlet并使用response输出字符串 创建XMLHttpRequest 对象:用于和服务器交换数据
var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7, Firefox, Chrome, Opera, Safari
xmlhttp new XMLHttpRequest();
}else {
//code for lE6,IE5
xmlhttp new ActiveXObject(Microsoft.XMLHTTP);
}向服务器发送请求
xmlhttp.open(GET,url);
xmlhttp.send();//发送请求获取服务器响应数据
xmlhttp.onreadystatechange function () {if (xmlhttp.readyState 4 xmlhttp.status 200){alert(xmlhttp.responseText)}
};
例子 AjaxServlet
WebServlet(/ajaxServlet)
public class AjaxServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.响应数据response.getWriter().write(hello ajax);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
01-ajax-demo1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript//1.创建核心对象var xmlhttp;if (window.XMLHttpRequest) {
//code for IE7, Firefox, Chrome, Opera, Safarixmlhttp new XMLHttpRequest();}else {
//code for lE6,IE5xmlhttp new ActiveXObject(Microsoft.XMLHTTP);}//2.发送请求xmlhttp.open(GET,http://localhost:8080/ajax-demo/ajaxServlet);//写全路径的原因是前端和后端是不在一个服务器部署的要访问就全路径xmlhttp.send();//发送请求//3.获取响应xmlhttp.onreadystatechange function () {if (xmlhttp.readyState 4 xmlhttp.status 200){alert(this.responseText);}};
/script/body
/html3.2 案例 验证用户名是否存在 套用案例的静态页面 SelectUserServlet
package com.itheima.web.servlet;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;WebServlet(/selectUserServlet)
public class SelectUserServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收用户名String username request.getParameter(username);//2.调用service查询User对象boolean flag true;//3.响应标记response.getWriter().write(flag);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
注册页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title欢迎注册/titlelink hrefcss/register.css relstylesheet
/head
bodydiv classform-divdiv classreg-contenth1欢迎注册/h1span已有帐号/span a hreflogin.html登录/a/divform idreg-form action# methodgettabletrtd用户名/tdtd classinputsinput nameusername typetext idusernamebrspan idusername_err classerr_msg styledisplay: none用户名已存在/span/td/trtrtd密码/tdtd classinputsinput namepassword typepassword idpasswordbrspan idpassword_err classerr_msg styledisplay: none密码格式有误/span/td/trtrtd验证码/tdtd classinputsinput namecheckCode typetext idcheckCodeimg srcimgs/a.jpga href# idchangeImg看不清/a/td/tr/tablediv classbuttonsinput value注 册 typesubmit idreg_btn/divbr classclear/form/divscript//1. 给用户名输入框绑定 失去焦点事件document.getElementById(username).onblur function (){//2. 发送ajax请求//获取用户名的值var username this.value;//2.1创建核心对象var xmlhttp;if (window.XMLHttpRequest) {
//code for IE7, Firefox, Chrome, Opera, Safarixmlhttp new XMLHttpRequest();}else {
//code for lE6,IE5xmlhttp new ActiveXObject(Microsoft.XMLHTTP);}//2.1 发送请求xmlhttp.open(GET,http://localhost:8080/ajax-demo/selectUserServlet?usernameusername);//写全路径的原因是前端和后端是不在一个服务器部署的要访问就全路径xmlhttp.send();//发送请求//2.3获取响应xmlhttp.onreadystatechange function () {if (xmlhttp.readyState 4 xmlhttp.status 200){// alert(this.responseText);if(this.responseText true){//用户名存在显示提示信息document.getElementById(username_err).style.display ;}else {//用户不存在 清除提示信息document.getElementById(username_err).style.display none;}}};}
/script
/body
/html3.3 Axios 异步框架 Axios对原生的AJAX进行封装简化书写 Axios官网 3.3.1 Axios 快速入门
引入axios 的js文件
script srcjslaxios-0.18.0.js/script使用axios 发送请求并获取响应结果
axios({method:get,url:http://localhost:8080/ajax_demo/axiosServlet?usernamezhangsan}).then(function (resp){alert(resp.data);});
axios({method:post,url:http://localhost:8080/ajax_demo/axiosServlet,data:usernamezhangsan}).then(function (resp){alert(resp.data);});
例子 axios-0.18.0.js 文件
/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
!function(e,t){objecttypeof exportsobjecttypeof module?module.exportst():functiontypeof definedefine.amd?define([],t):objecttypeof exports?exports.axiost():e.axiost()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var on[r]{exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded!0,o.exports}var n{};return t.me,t.cn,t.p,t(0)}([function(e,t,n){e.exportsn(1)},function(e,t,n){use strict;function r(e){var tnew s(e),ni(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var on(2),in(3),sn(5),un(6),ar(u);a.Axioss,a.createfunction(e){return r(o.merge(u,e))},a.Canceln(23),a.CancelTokenn(24),a.isCanceln(20),a.allfunction(e){return Promise.all(e)},a.spreadn(25),e.exportsa,e.exports.defaulta},function(e,t,n){use strict;function r(e){return[object Array]R.call(e)}function o(e){return[object ArrayBuffer]R.call(e)}function i(e){returnundefined!typeof FormDatae instanceof FormData}function s(e){var t;return tundefined!typeof ArrayBufferArrayBuffer.isView?ArrayBuffer.isView(e):ee.buffere.buffer instanceof ArrayBuffer}function u(e){returnstringtypeof e}function a(e){returnnumbertypeof e}function c(e){returnundefinedtypeof e}function f(e){return null!eobjecttypeof e}function p(e){return[object Date]R.call(e)}function d(e){return[object File]R.call(e)}function l(e){return[object Blob]R.call(e)}function h(e){return[object Function]R.call(e)}function m(e){return f(e)h(e.pipe)}function y(e){returnundefined!typeof URLSearchParamse instanceof URLSearchParams}function w(e){return e.replace(/^\s*/,).replace(/\s*$/,)}function g(){return(undefinedtypeof navigator||ReactNative!navigator.product)(undefined!typeof windowundefined!typeof document)}function v(e,t){if(null!eundefined!typeof e)if(object!typeof e(e[e]),r(e))for(var n0,oe.length;no;n)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)t.call(null,e[i],i,e)}function x(){function e(e,n){objecttypeof t[n]objecttypeof e?t[n]x(t[n],e):t[n]e}for(var t{},n0,rarguments.length;nr;n)v(arguments[n],e);return t}function b(e,t,n){return v(t,function(t,r){nfunctiontypeof t?e[r]E(t,n):e[r]t}),e}var En(3),Cn(4),RObject.prototype.toString;e.exports{isArray:r,isArrayBuffer:o,isBuffer:C,isFormData:i,isArrayBufferView:s,isString:u,isNumber:a,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:g,forEach:v,merge:x,extend:b,trim:w}},function(e,t){use strict;e.exportsfunction(e,t){return function(){for(var nnew Array(arguments.length),r0;rn.length;r)n[r]arguments[r];return e.apply(t,n)}}},function(e,t){function n(e){return!!e.constructorfunctiontypeof e.constructor.isBuffere.constructor.isBuffer(e)}function r(e){returnfunctiontypeof e.readFloatLEfunctiontypeof e.slicen(e.slice(0,0))}/*!* Determine if an object is a Buffer** author Feross Aboukhadijeh https://feross.org* license MIT*/e.exportsfunction(e){return null!e(n(e)||r(e)||!!e._isBuffer)}},function(e,t,n){use strict;function r(e){this.defaultse,this.interceptors{request:new s,response:new s}}var on(6),in(2),sn(17),un(18);r.prototype.requestfunction(e){stringtypeof e(ei.merge({url:arguments[0]},arguments[1])),ei.merge(o,{method:get},this.defaults,e),e.methode.method.toLowerCase();var t[u,void 0],nPromise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)nn.then(t.shift(),t.shift());return n},i.forEach([delete,get,head,options],function(e){r.prototype[e]function(t,n){return this.request(i.merge(n||{},{method:e,url:t}))}}),i.forEach([post,put,patch],function(e){r.prototype[e]function(t,n,r){return this.request(i.merge(r||{},{method:e,url:t,data:n}))}}),e.exportsr},function(e,t,n){use strict;function r(e,t){!i.isUndefined(e)i.isUndefined(e[Content-Type])(e[Content-Type]t)}function o(){var e;returnundefined!typeof XMLHttpRequest?en(8):undefined!typeof process(en(8)),e}var in(2),sn(7),u{Content-Type:application/x-www-form-urlencoded},a{adapter:o(),transformRequest:[function(e,t){return s(t,Content-Type),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,application/x-www-form-urlencoded;charsetutf-8),e.toString()):i.isObject(e)?(r(t,application/json;charsetutf-8),JSON.stringify(e)):e}],transformResponse:[function(e){if(stringtypeof e)try{eJSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:XSRF-TOKEN,xsrfHeaderName:X-XSRF-TOKEN,maxContentLength:-1,validateStatus:function(e){return e200e300}};a.headers{common:{Accept:application/json, text/plain, */*}},i.forEach([delete,get,head],function(e){a.headers[e]{}}),i.forEach([post,put,patch],function(e){a.headers[e]i.merge(u)}),e.exportsa},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t){r.forEach(e,function(n,r){r!tr.toUpperCase()t.toUpperCase()(e[t]n,delete e[r])})}},function(e,t,n){use strict;var rn(2),on(9),in(12),sn(13),un(14),an(10),cundefined!typeof windowwindow.btoawindow.btoa.bind(window)||n(15);e.exportsfunction(e){return new Promise(function(t,f){var pe.data,de.headers;r.isFormData(p)delete d[Content-Type];var lnew XMLHttpRequest,honreadystatechange,m!1;if(undefinedtypeof window||!window.XDomainRequest||withCredentialsin l||u(e.url)||(lnew window.XDomainRequest,honload,m!0,l.onprogressfunction(){},l.ontimeoutfunction(){}),e.auth){var ye.auth.username||,we.auth.password||;d.AuthorizationBasic c(y:w)}if(l.open(e.method.toUpperCase(),i(e.url,e.params,e.paramsSerializer),!0),l.timeoute.timeout,l[h]function(){if(l(4l.readyState||m)(0!l.status||l.responseURL0l.responseURL.indexOf(file:))){var ngetAllResponseHeadersin l?s(l.getAllResponseHeaders()):null,re.responseTypetext!e.responseType?l.response:l.responseText,i{data:r,status:1223l.status?204:l.status,statusText:1223l.status?No Content:l.statusText,headers:n,config:e,request:l};o(t,f,i),lnull}},l.onerrorfunction(){f(a(Network Error,e,null,l)),lnull},l.ontimeoutfunction(){f(a(timeout of e.timeoutms exceeded,e,ECONNABORTED,l)),lnull},r.isStandardBrowserEnv()){var gn(16),v(e.withCredentials||u(e.url))e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v(d[e.xsrfHeaderName]v)}if(setRequestHeaderin lr.forEach(d,function(e,t){undefinedtypeof pcontent-typet.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),e.withCredentials(l.withCredentials!0),e.responseType)try{l.responseTypee.responseType}catch(t){if(json!e.responseType)throw t}functiontypeof e.onDownloadProgressl.addEventListener(progress,e.onDownloadProgress),functiontypeof e.onUploadProgressl.uploadl.upload.addEventListener(progress,e.onUploadProgress),e.cancelTokene.cancelToken.promise.then(function(e){l(l.abort(),f(e),lnull)}),void 0p(pnull),l.send(p)})}},function(e,t,n){use strict;var rn(10);e.exportsfunction(e,t,n){var on.config.validateStatus;n.statuso!o(n.status)?t(r(Request failed with status code n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){use strict;var rn(11);e.exportsfunction(e,t,n,o,i){var snew Error(e);return r(s,t,n,o,i)}},function(e,t){use strict;e.exportsfunction(e,t,n,r,o){return e.configt,n(e.coden),e.requestr,e.responseo,e}},function(e,t,n){use strict;function r(e){return encodeURIComponent(e).replace(/%40/gi,).replace(/%3A/gi,:).replace(/%24/g,$).replace(/%2C/gi,,).replace(/%20/g,).replace(/%5B/gi,[).replace(/%5D/gi,])}var on(2);e.exportsfunction(e,t,n){if(!t)return e;var i;if(n)in(t);else if(o.isURLSearchParams(t))it.toString();else{var s[];o.forEach(t,function(e,t){null!eundefined!typeof e(o.isArray(e)?t[]:e[e],o.forEach(e,function(e){o.isDate(e)?ee.toISOString():o.isObject(e)(eJSON.stringify(e)),s.push(r(t)r(e))}))}),is.join()}return i(e(e.indexOf(?)-1??:)i),e}},function(e,t,n){use strict;var rn(2),o[age,authorization,content-length,content-type,etag,expires,from,host,if-modified-since,if-unmodified-since,last-modified,location,max-forwards,proxy-authorization,referer,retry-after,user-agent];e.exportsfunction(e){var t,n,i,s{};return e?(r.forEach(e.split(\n),function(e){if(ie.indexOf(:),tr.trim(e.substr(0,i)).toLowerCase(),nr.trim(e.substr(i1)),t){if(s[t]o.indexOf(t)0)return;set-cookiet?s[t](s[t]?s[t]:[]).concat([n]):s[t]s[t]?s[t], n:n}}),s):s}},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){function e(e){var te;return n(o.setAttribute(href,t),to.href),o.setAttribute(href,t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,):,host:o.host,search:o.search?o.search.replace(/^\?/,):,hash:o.hash?o.hash.replace(/^#/,):,hostname:o.hostname,port:o.port,pathname:/o.pathname.charAt(0)?o.pathname:/o.pathname}}var t,n/(msie|trident)/i.test(navigator.userAgent),odocument.createElement(a);return te(window.location.href),function(n){var or.isString(n)?e(n):n;return o.protocolt.protocolo.hostt.host}}():function(){return function(){return!0}}()},function(e,t){use strict;function n(){this.messageString contains an invalid character}function r(e){for(var t,r,iString(e),s,u0,ao;i.charAt(0|u)||(a,u%1);sa.charAt(63t8-u%1*8)){if(ri.charCodeAt(u.75),r255)throw new n;tt8|r}return s}var oABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789/;n.prototypenew Error,n.prototype.code5,n.prototype.nameInvalidCharacterError,e.exportsr},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var u[];u.push(eencodeURIComponent(t)),r.isNumber(n)u.push(expiresnew Date(n).toGMTString()),r.isString(o)u.push(patho),r.isString(i)u.push(domaini),s!0u.push(secure),document.cookieu.join(; )},read:function(e){var tdocument.cookie.match(new RegExp((^|;\\s*)(e)([^;]*)));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,,Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){use strict;function r(){this.handlers[]}var on(2);r.prototype.usefunction(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.ejectfunction(e){this.handlers[e](this.handlers[e]null)},r.prototype.forEachfunction(e){o.forEach(this.handlers,function(t){null!te(t)})},e.exportsr},function(e,t,n){use strict;function r(e){e.cancelTokene.cancelToken.throwIfRequested()}var on(2),in(19),sn(20),un(6),an(21),cn(22);e.exportsfunction(e){r(e),e.baseURL!a(e.url)(e.urlc(e.baseURL,e.url)),e.headerse.headers||{},e.datai(e.data,e.headers,e.transformRequest),e.headerso.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach([delete,get,head,post,put,patch,common],function(t){delete e.headers[t]});var te.adapter||u.adapter;return t(e).then(function(t){return r(e),t.datai(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),tt.response(t.response.datai(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t,n){return r.forEach(n,function(n){en(e,t)}),e}},function(e,t){use strict;e.exportsfunction(e){return!(!e||!e.__CANCEL__)}},function(e,t){use strict;e.exportsfunction(e){return/^([a-z][a-z\d\\-\.]*:)?\/\//i.test(e)}},function(e,t){use strict;e.exportsfunction(e,t){return t?e.replace(/\/$/,)/t.replace(/^\//,):e}},function(e,t){use strict;function n(e){this.messagee}n.prototype.toStringfunction(){returnCancel(this.message?: this.message:)},n.prototype.__CANCEL__!0,e.exportsn},function(e,t,n){use strict;function r(e){if(function!typeof e)throw new TypeError(executor must be a function.);var t;this.promisenew Promise(function(e){te});var nthis;e(function(e){n.reason||(n.reasonnew o(e),t(n.reason))})}var on(23);r.prototype.throwIfRequestedfunction(){if(this.reason)throw this.reason},r.sourcefunction(){var e,tnew r(function(t){et});return{token:t,cancel:e}},e.exportsr},function(e,t){use strict;e.exportsfunction(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURLaxios.min.mapAxiosServlet
package com.itheima.web.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;WebServlet(/axiosServlet)
public class AxiosServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(get...);//1.接收请求参数String username request.getParameter(username);System.out.println(username);//2.响应数据response.getWriter().write(hello Axios);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(post....);this.doGet(request, response);}
}
1、get请求部分
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript srcjs/axios-0.18.0.js/script
script//1.getaxios({method:get,url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan}).then(function (resp){alert(resp.data);})/script
/body
/html2、post部分 //2.postaxios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan}).then(function (resp){alert(resp.data);})3.3.2 Axios 请求方式别名 为了方便起见 Axios已经为所有支持的请求方法提供了别名 方法名作用get(url)发起GET方式请求post(url,请求参数)发起POST方式请求
发送get请求 axios.get(url).then(function (resp){alert(resp.data)})
发送post请求
axios.post(url,参数).then(function (resp){alert(resp.data)})
方便例子
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript srcjs/axios-0.18.0.js/script
script//1.getaxios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (resp){alert(resp.data)})//2.postaxios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (resp){alert(resp.data)})/script
/body
/html案例练习
!DOCTYPE html
html langen
headmeta charsetUTF-8title欢迎注册/titlelink hrefcss/register.css relstylesheet
/head
body
div classform-divdiv classreg-contenth1欢迎注册/h1span已有帐号/span a hreflogin.html登录/a/divform idreg-form action# methodgettabletrtd用户名/tdtd classinputsinput nameusername typetext idusernamebrspan idusername_err classerr_msg styledisplay: none用户名太受欢迎了/span/td/trtrtd密码/tdtd classinputsinput namepassword typepassword idpasswordbrspan idpassword_err classerr_msg styledisplay: none密码格式有误/span/td/trtrtd验证码/tdtd classinputsinput namecheckCode typetext idcheckCodeimg srcimgs/a.jpga href# idchangeImg看不清/a/td/tr/tablediv classbuttonsinput value注 册 typesubmit idreg_btn/divbr classclear/form
/div
/body
script srcjs/axios-0.18.0.js/script
scriptdocument.getElementById(username).onblur function (){axios.get(http://localhost:8080/ajax-demo/selectServlet?usernameusername).then(function (resp){console.log(resp.data)if (true resp.data.toString()){//此时没有查询到数据document.getElementById(username_err).style.display ;}else {//查询到有该数据document.getElementById(username_err).style.display none;}})}
/script
/html
4. JSON 概念JavaScript Object Notation。JavaScript 对象表示法由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输 4.1 JSON基础语法
定义
var 变量名 {key1: value1,key2: value2,...};
示例 var json {name: zhangsan,age: 23,addr:[北京,上海,广州]};
value的数据类型为: 数字 (整数或浮点数) 字符串 (在双引号中) 逻辑值 (true或false) 数组 (在方括号中) 对象 (在花括号中) null
获取数据:
变量名.keyjson.name例子
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript//定义josnvar json {name:zhangsan,age:23,addr:[北京,上海,西安]}//获取值alert(josn.name);/script
/body
/html4.2 JSON数据和Java对象转换
请求数据JSON字符串转为Java对象响应数据Java对象转为JSON字符串 Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库是目前Java语言中最快的JSON库可以实现Java对象和JSON字符串的相互转换。 使用
导入坐标
dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version
/dependencyJava对象转JSON
String jsonStr JSON.toJSONString(obj);JSON字符串转Java对象
User user JSON.parseObject(jsonStr,User.class);例子
package com.itheima.json;import com.alibaba.fastjson.JSON;public class FastJsonDemo {public static void main(String[] args) {//1.将java对象转换为json字符串User user new User();user.setId(1);user.setUsername(zhangsan);user.setPassword(123);String jsonString JSON.toJSONString(user);System.out.println(jsonString);//{id:1,password:123,username:zhangsan}//2.将JSON字符串转为java对象User u JSON.parseObject({\id\:1,\password\:\123\,\username\:\zhangsan\}, User.class);System.out.println(u);}
} 4.3 案例 品牌数据列表
4.3.1 查询所有 核心配置文件
?xml version1.0 encodingUTF-8?project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdorg.example/groupIdartifactIdbrand-demo/artifactIdversion1.0-SNAPSHOT/versionpackagingwar/packagingpropertiesmaven.compiler.source17/maven.compiler.sourcemaven.compiler.target17/maven.compiler.target/propertiesdependencies!-- servlet--dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!-- fastjson--dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version/dependency/dependenciesbuildpluginsplugingroupIdorg.apache.tomcat.maven/groupIdartifactIdtomcat7-maven-plugin/artifactIdversion2.2/version/plugin/plugins/build
/project
brand.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
a hrefaddBrand.htmlinput typebutton value新增/abr
hr
table idbrandTable border1 cellspacing0 width100%trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/trtr aligncentertd1/tdtd三只松鼠/tdtd三只松鼠/tdtd100/tdtd三只松鼠好吃不上火/tdtd启用/tdtda href#修改/a a href#删除/a/td/trtr aligncentertd2/tdtd优衣库/tdtd优衣库/tdtd10/tdtd优衣库服适人生/tdtd禁用/tdtda href#修改/a a href#删除/a/td/trtr aligncentertd3/tdtd小米/tdtd小米科技有限公司/tdtd1000/tdtd为发烧而生/tdtd启用/tdtda href#修改/a a href#删除/a/td/tr
/tablescript srcjs/axios-0.18.0.js/scriptscript//1. 当页面加载完成后发送ajax请求window.onload function () {//2. 发送ajax请求axios({method:get,url:http://localhost:8080/brand-demo/selectAllServlet}).then(function (resp) {//获取数据let brands resp.data;let tableData tr\n th序号/th\n th品牌名称/th\n th企业名称/th\n th排序/th\n th品牌介绍/th\n th状态/th\n th操作/th\n /tr;for (let i 0; i brands.length ; i) {let brand brands[i];tableData \n tr align\center\\n td(i1)/td\n tdbrand.brandName/td\n tdbrand.companyName/td\n tdbrand.ordered/td\n tdbrand.description/td\n tdbrand.status/td\n \n tda href\#\修改/a a href\#\删除/a/td\n /tr;}// 设置表格数据document.getElementById(brandTable).innerHTML tableData;})}/script/body
/htmlSelectAllService
package com.itheima.web;import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;WebServlet(/selectAllServlet)
public class SelectAllServlet extends HttpServlet {private BrandService brandService new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 调用Service查询ListBrand brands brandService.selectAll();//2. 将集合转换为JSON数据 序列化String jsonString JSON.toJSONString(brands);//3. 响应数据response.setContentType(text/json;charsetutf-8);response.getWriter().write(jsonString);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}4.3.2 新增品牌 addBrand.html
!DOCTYPE html
html langenheadmeta charsetUTF-8title添加品牌/title
/head
body
h3添加品牌/h3
form action methodpost品牌名称input idbrandName namebrandNamebr企业名称input idcompanyName namecompanyNamebr排序input idordered nameorderedbr描述信息textarea rows5 cols20 iddescription namedescription/textareabr状态input typeradio namestatus value0禁用input typeradio namestatus value1启用brinput typebutton idbtn value提交
/formscript srcjs/axios-0.18.0.js/scriptscript//1. 给按钮绑定单击事件document.getElementById(btn).onclick function () {// 将表单数据转为jsonvar formData {brandName:,companyName:,ordered:,description:,status:,};// 获取表单数据let brandName document.getElementById(brandName).value;// 设置数据formData.brandName brandName;// 获取表单数据let companyName document.getElementById(companyName).value;// 设置数据formData.companyName companyName;// 获取表单数据let ordered document.getElementById(ordered).value;// 设置数据formData.ordered ordered;// 获取表单数据let description document.getElementById(description).value;// 设置数据formData.description description;let status document.getElementsByName(status);for (let i 0; i status.length; i) {if(status[i].checked){//formData.status status[i].value ;}}console.log(formData);//2. 发送ajax请求axios({method:post,url:http://localhost:8080/brand-demo/addServlet,data:formData}).then(function (resp) {// 判断响应数据是否为 successif(resp.data success){location.href http://localhost:8080/brand-demo/brand.html;}})}/script
/body
/htmladdServlet
WebServlet(/addServlet)
public class AddServlet extends HttpServlet {private BrandService brandService new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收数据,request.getParameter 不能接收json的数据/* String brandName request.getParameter(brandName);System.out.println(brandName);*/// 获取请求体数据BufferedReader br request.getReader();String params br.readLine();// 将JSON字符串转为Java对象Brand brand JSON.parseObject(params, Brand.class);//2. 调用service 添加brandService.add(brand);//3. 响应成功标识response.getWriter().write(success);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
