小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON

这篇具有很好参考价值的文章主要介绍了小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. Filter

  • 概念: Filter表示过滤器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。
  • 过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能。
  • 过滤器一般完成一些通用的操作,比如:权限控制、统一编码处理、敏感字符处理等等
    小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

1.1 Filter快速入门

  1. 定义类,实现Filter接口,并重写其所有方法
public class FilterDemo implements Filter {
	public void init(FilterConfig filterConfig)
	public void doFilter(ServletRequest request)
	public void destroy(){}
}
  1. 配置Filter拦截资源的路径:再类上定义@WebFilter注解
@WebFilter("/*")
	public class FilterDemo implements Filter {}
  1. 在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{

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        System.out.println("FilterDemo...");

        //放行
        chain.doFilter(request,response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }


    @Override
    public void destroy() {

    }
}

放行之后访问才成功:
小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

1.2 Filter执行流程

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

  1. 放行后访问对应资源,资源访问完成后,还会回到Filter中吗?
  2. 如果回到Filter中,是重头执行还是执行放行后的逻辑呢?
    • 放行后逻辑
      小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

1.3 Filter拦截路径配置

Filter 可以根据需求,配置不同的拦截资源路径

 @WebFilter("/*")
 public class FilterDemo
  • 拦截具体的资源:/index.jsp:只有访问index.jsp时才会被拦截。
  • 目录拦截:/user/*:访问/user下的所有资源,都会被拦截
  • 后缀名拦截: *.jsp:访问后缀名为jsp的资源,都会被拦截
  • 拦截所有:/*:访问所有资源,都会被拦截

1.4 Filter过滤器链

一个Web应用,可以配置多个过滤器,这多个过滤器被称为过滤器链

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

注解配置的Filter,优先级按照过滤器类名(字符串)的自然排序

1.5 案例登录验证

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
在brand-demo下:LoginFilter

@WebFilter("/*")
public class LoginFilter implements Filter {

    @Override
    public 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中 user
        HttpSession session = req.getSession();
        Object user = session.getAttribute("user");

        //2.判断 user 是否为null
        if(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() {
    }


}

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

2. Listener

  • 概念: Listener表示监听器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。
  • 监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件
  • Listener分类: JavaWeb中提供了8个监听器
监听器分类 监听器名称 Value
ServletContext监听 ServletContextListener 用于对ServletContext对象进行监听(创建、销毁)
ServletContextAttributeListener 对ServletContext对象中属性的监听(增删改属性)
Session监听 HttpsessionListener 对Session对象的整体状态的监听(创建、销毁)
HttpSessionAttributeListener 对Session对象中的属性监听(增删改属性)
HttpSessionBindingListener 监听对象于Session的绑定和解除
HttpSessionActivationListener 对Session数据的钝化和活化的监听
Request监听 ServletRequestListener 对Request对象进行监听(创建、销毁)
ServletRequestAttributeListener 对Request对象中属性的监听(增删改属性)

2.1 ServletContextListener使用

Listener的基本使用都是类似的,掌握一个便可通类

  1. 定义类,实现ServletContextListener接口
public class ContextLoaderListener implements ServletContextListener {
	/**
	* ServletContext对象被创建:整个web应用发布成功
	* @param sce
	*/
	public void contextInitialized(ServletcintextEvent sce){}
	/*
	* ServletContext对象被销毁:整个web应用卸载
	* @param sce
	*/
	public void contextDestroyed(ServletContextEvent sce){}
	}

  1. 在类上添加@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 {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        //加载资源
        System.out.println(" ContexLoaderListener ...");
    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

        //释放资源
    }
}

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

3. AJAX

概念: AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML

AJAX作用:

  1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据

    • 使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换JSP页面了
      小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
  2. 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如∶搜索联想、用户名是否可用校验,等等…

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

同步和异步的概念:
小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

3.1 AJAX 快速入门

  1. 编写AjaxServlet,并使用response输出字符串

  2. 创建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");
}
  1. 向服务器发送请求
xmlhttp.open("GET","url");
xmlhttp.send();//发送请求
  1. 获取服务器响应数据
xmlhttp.onreadystatechange = function () {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		alert(xmlhttp.responseText)
	}
};

例子:
AjaxServlet:

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.响应数据
        response.getWriter().write("hello ajax");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

01-ajax-demo1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //1.创建核心对象
    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");
    }

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

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

3.2 案例 验证用户名是否存在

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
套用案例的静态页面:
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 {
    @Override
    protected 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);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

注册页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号?</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清?</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>

<script>
    //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, Safari
            xmlhttp = new XMLHttpRequest();
        }else {
//code for lE6,IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.1 发送请求
        xmlhttp.open("GET","http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
        //写全路径的原因是前端和后端是不在一个服务器部署的,要访问就全路径

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

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

3.3 Axios 异步框架

Axios对原生的AJAX进行封装,简化书写
Axios官网

3.3.1 Axios 快速入门

  1. 引入axios 的js文件
<script src="jslaxios-0.18.0.js"</script>
  1. 使用axios 发送请求,并获取响应结果
axios({
        method:"get",
        url:"http://localhost:8080/ajax_demo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });

axios({
        method:"post",
        url:"http://localhost:8080/ajax_demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });

例子:
axios-0.18.0.js 文件

/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[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.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new s(e),n=i(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var o=n(2),i=n(3),s=n(5),u=n(6),a=r(u);a.Axios=s,a.create=function(e){return r(o.merge(u,e))},a.Cancel=n(23),a.CancelToken=n(24),a.isCancel=n(20),a.all=function(e){return Promise.all(e)},a.spread=n(25),e.exports=a,e.exports.default=a},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){return"undefined"!=typeof FormData&&e instanceof FormData}function s(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function u(e){return"string"==typeof e}function a(e){return"number"==typeof e}function c(e){return"undefined"==typeof e}function f(e){return null!==e&&"object"==typeof 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){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function w(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function g(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function v(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;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){"object"==typeof t[n]&&"object"==typeof e?t[n]=x(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function b(e,t,n){return v(t,function(t,r){n&&"function"==typeof t?e[r]=E(t,n):e[r]=t}),e}var E=n(3),C=n(4),R=Object.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.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t){function n(e){return!!e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function r(e){return"function"==typeof e.readFloatLE&&"function"==typeof e.slice&&n(e.slice(0,0))}/*!
 * Determine if an object is a Buffer
 *
 * @author   Feross Aboukhadijeh <https://feross.org>
 * @license  MIT
 */
    e.exports=function(e){return null!=e&&(n(e)||r(e)||!!e._isBuffer)}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new s,response:new s}}var o=n(6),i=n(2),s=n(17),u=n(18);r.prototype.request=function(e){"string"==typeof e&&(e=i.merge({url:arguments[0]},arguments[1])),e=i.merge(o,{method:"get"},this.defaults,e),e.method=e.method.toLowerCase();var t=[u,void 0],n=Promise.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;)n=n.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.exports=r},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;return"undefined"!=typeof XMLHttpRequest?e=n(8):"undefined"!=typeof process&&(e=n(8)),e}var i=n(2),s=n(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;charset=utf-8"),e.toString()):i.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};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.exports=a},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(9),i=n(12),s=n(13),u=n(14),a=n(10),c="undefined"!=typeof window&&window.btoa&&window.btoa.bind(window)||n(15);e.exports=function(e){return new Promise(function(t,f){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest,h="onreadystatechange",m=!1;if("undefined"==typeof window||!window.XDomainRequest||"withCredentials"in l||u(e.url)||(l=new window.XDomainRequest,h="onload",m=!0,l.onprogress=function(){},l.ontimeout=function(){}),e.auth){var y=e.auth.username||"",w=e.auth.password||"";d.Authorization="Basic "+c(y+":"+w)}if(l.open(e.method.toUpperCase(),i(e.url,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l[h]=function(){if(l&&(4===l.readyState||m)&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in l?s(l.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:r,status:1223===l.status?204:l.status,statusText:1223===l.status?"No Content":l.statusText,headers:n,config:e,request:l};o(t,f,i),l=null}},l.onerror=function(){f(a("Network Error",e,null,l)),l=null},l.ontimeout=function(){f(a("timeout of "+e.timeout+"ms exceeded",e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=n(16),v=(e.withCredentials||u(e.url))&&e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v&&(d[e.xsrfHeaderName]=v)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),e.withCredentials&&(l.withCredentials=!0),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),f(e),l=null)}),void 0===p&&(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(10);e.exports=function(e,t,n){var o=n.config.validateStatus;n.status&&o&&!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 r=n(11);e.exports=function(e,t,n,o,i){var s=new Error(e);return r(s,t,n,o,i)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,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 o=n(2);e.exports=function(e,t,n){if(!t)return e;var i;if(n)i=n(t);else if(o.isURLSearchParams(t))i=t.toString();else{var s=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),s.push(r(t)+"="+r(e))}))}),i=s.join("&")}return i&&(e+=(e.indexOf("?")===-1?"?":"&")+i),e}},function(e,t,n){"use strict";var r=n(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.exports=function(e){var t,n,i,s={};return e?(r.forEach(e.split("\n"),function(e){if(i=e.indexOf(":"),t=r.trim(e.substr(0,i)).toLowerCase(),n=r.trim(e.substr(i+1)),t){if(s[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?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 r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.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),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t){"use strict";function n(){this.message="String contains an invalid character"}function r(e){for(var t,r,i=String(e),s="",u=0,a=o;i.charAt(0|u)||(a="=",u%1);s+=a.charAt(63&t>>8-u%1*8)){if(r=i.charCodeAt(u+=.75),r>255)throw new n;t=t<<8|r}return s}var o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";n.prototype=new Error,n.prototype.code=5,n.prototype.name="InvalidCharacterError",e.exports=r},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var u=[];u.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&u.push("expires="+new Date(n).toGMTString()),r.isString(o)&&u.push("path="+o),r.isString(i)&&u.push("domain="+i),s===!0&&u.push("secure"),document.cookie=u.join("; ")},read:function(e){var t=document.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 o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),i=n(19),s=n(20),u=n(6),a=n(21),c=n(22);e.exports=function(e){r(e),e.baseURL&&!a(e.url)&&(e.url=c(e.baseURL,e.url)),e.headers=e.headers||{},e.data=i(e.data,e.headers,e.transformRequest),e.headers=o.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 t=e.adapter||u.adapter;return t(e).then(function(t){return r(e),t.data=i(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),t&&t.response&&(t.response.data=i(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURL=axios.min.map

AxiosServlet:

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 {
    @Override
    protected 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");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post....");
        this.doGet(request, response);
    }
}

1、get请求部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1.get
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

</script>
</body>
</html>

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
2、post部分

 //2.post
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

3.3.2 Axios 请求方式别名

为了方便起见, Axios已经为所有支持的请求方法提供了别名
小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

方法名 作用
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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1.get
    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan")
        .then(function (resp){
            alert(resp.data)
        })

    //2.post
    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan")
        .then(function (resp){
            alert(resp.data)
        })


</script>
</body>
</html>

案例练习:
小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号?</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名太受欢迎了</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清?</a>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
</body>
<script src="js/axios-0.18.0.js"></script>
<script>
    document.getElementById("username").onblur = function (){
    axios.get("http://localhost:8080/ajax-demo/selectServlet?username="+username)
        .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 对象表示法
  • 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
    小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

4.1 JSON基础语法

  • 定义:
var 变量名 ={
	"key1": value1,
	"key2": value2,
	...
	};

示例

	var json ={
		"name": "zhangsan",
		"age": 23,
		"addr":["北京","上海","广州"]
		};

value的数据类型为:

  • 数字 (整数或浮点数)

  • 字符串 (在双引号中)

  • 逻辑值 (true或false)

  • 数组 (在方括号中)

  • 对象 (在花括号中)

  • null

获取数据:

变量名.key
json.name

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
   //定义josn
   var json = {
       "name":"zhangsan",
       "age":23,
       "addr":["北京","上海","西安"]
   }

   //获取值
   alert(josn.name);


</script>
</body>
</html>

4.2 JSON数据和Java对象转换

  • 请求数据:JSON字符串转为Java对象
  • 响应数据:Java对象转为JSON字符串
    小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前Java语言中最快的JSON库,可以实现Java对象和JSON字符串的相互转换。

使用:

  1. 导入坐标
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.62</version>
</dependency>
  1. Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
  1. 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);


    }
}

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端

4.3 案例 品牌数据列表

4.3.1 查询所有

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
核心配置文件:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>brand-demo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>


  <properties>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
  </properties>

  <dependencies>
    <!--        servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

<!--    fastjson-->

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
    </dependency>

  </dependencies>


  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
      </plugin>

    </plugins>
  </build>
</project>

brand.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
        <td>100</td>
        <td>三只松鼠,好吃不上火</td>
        <td>启用</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库,服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>

<script src="js/axios-0.18.0.js"></script>

<script>
    //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>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }



</script>


</body>
</html>

SelectAllService

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();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

4.3.2 新增品牌

小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON,JavaWeb,ajax,json,前端
addBrand.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称:<input id="brandName" name="brandName"><br>
    企业名称:<input id="companyName" name="companyName"><br>
    排序:<input id="ordered" name="ordered"><br>
    描述信息:<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
    状态:
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

    <input type="button" id="btn"  value="提交">
</form>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        // 将表单数据转为json
        var 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) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }


</script>
</body>
</html>

addServlet:文章来源地址https://www.toymoban.com/news/detail-633263.html

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected 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");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

到了这里,关于小黑子—JavaWeb:第六章 - Filter、Listener、AJAX与JSON的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Filter&ajax

    概念:表示过滤器,是JavaWeb三大组件(Servlet,Filter,Listener)之一; 过滤器可以把对资源的请求 拦截 下来,从而实现一些特殊的功能. 过滤器可以完成一些 通用 操作比如:登录添加购物车,视频广告,敏感字符处理等等... 用户检测,搜索提示等 异步 的JavaScript ① 与服务器进行数据交换:

    2024年02月19日
    浏览(32)
  • 【JavaWeb后端开发-第六章(2)】SpringBootWeb案例

    前面我们已经实现了员工信息的条件分页查询以及删除操作。 关于员工管理的功能,还有两个需要实现:     ♦ 新增员工     ♦ 修改员工     首先我们先完成\\\"新增员工\\\"的功能开发,再完成\\\"修改员工\\\"的功能开发。而在\\\"新增员工\\\"中,需要添加头像,而头像需

    2024年01月16日
    浏览(53)
  • 【JavaWeb后端开发-第六章(1)】SpringBootWeb案例

         前面我们已经讲解了Web前端开发的基础知识,也讲解了Web后端开发的基础(HTTP协议、请求响应),并且也讲解了数据库MySQL,以及通过Mybatis框架如何来完成数据库的基本操作。 那接下来,我们就通过一个案例,来将前端开发、后端开发、数据库整合起来。 而这个案例

    2024年02月02日
    浏览(54)
  • 【JavaWeb】11—Axios Ajax

    ⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以,麻烦各位看官顺手点个star~😊 如果文章对你有所帮助,可以点赞👍收藏⭐支持一下博主~😆 12.1.1 服务器端渲染 12.1.2 Ajax渲染(局部更新) 12.1.3 前后端分离

    2023年04月10日
    浏览(41)
  • javaweb之ajax异步交互

    一、概念 1、传统网站存在的问题 传统的页面交互是Servlet 调用完业务逻辑层后将数据存储到域对象中,然后跳转到指定的 jsp 页面,在页面上使用 EL表达式 和JSTL 标签库进行数据的展示。该模式存在以下问题: 网速比较慢的情况下,页面加载时间长,用户需等待 表单提交后

    2023年04月08日
    浏览(44)
  • JavaWeb-Ajax的学习

    今日目标: 能够使用 axios 发送 ajax 请求 熟悉 json 格式,并能使用 Fastjson 完成 java 对象和 json 串的相互转换 使用 axios + json 完成综合案例 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以

    2024年02月05日
    浏览(38)
  • 【JavaWeb后端开发-第六章(3)】SpringBootWeb案例—登录认证

        在前面的章节中,我们已经实现了 部门管理 、 员工管理 的基本功能,但是大家会发现,我们并没有登录,就直接访问到了Tlias智能学习辅助系统的后台。 这是不安全的,所以我们今天的主题就是 登录认证 。 最终我们要实现的效果就是用户必须登录之后,才可以访

    2024年01月19日
    浏览(52)
  • JavaWeb中异步交互的关键——Ajax

    AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器

    2024年02月03日
    浏览(45)
  • javaWeb中的Ajax_待后期增加

    Ajax是一种在JavaWeb开发中常用的技术,通过它可以实现异步通信和动态加载数据,提升用户体验。 首先我们得明白异步通信,客户端发出请求后可以继续执行其他操作  由于原生的Ajax过于复杂  so:      Axios对原生的Ajax进行了封装简化书写,快速开发:   代码:        

    2024年02月12日
    浏览(40)
  • 【JavaWeb后端开发-第六章(4)】SpringBootWeb案例—事务&AOP

        在数据库阶段我们已学习过事务了,我们讲到:      事务 是一组操作的集合,它是一个不可分割的工作单位。事务会把所有的操作作为一个整体,一起向数据库提交或者是撤销操作请求。所以这组操作要么同时成功,要么同时失败。     怎么样来控制这组

    2024年01月19日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包