当前位置:   article > 正文

JavaWeb总结_java web文档

java web文档

Javaweb介绍

用户打开浏览器,浏览器从自己服务端中搜索其中的数据(数据库),拿到数据库的数据后返回给服务端,服务端将界面程序处理其中的数据,美化后将数据展示给用户

配置环境变量

创建my.ini文件>>在bin文件中语法创建date文件,记住其中的密码>>安装mysql>>启动mysql>>

输入账号密码登录mysql>>在mysql中修改默认密码

为什么配置环境变量

登录中同时有ip和p端口参数

JDBC简介

用java代码操作数据库,希望的是用同一套java代码来操作不同类型的数据库(mysql,oracle,DB2等等)

主要是用来学习接口

过程

注册驱动>>获取和数据库的连接对象connection>>获取执行mysql的对象>>执行mysql
关闭执行mysql的对象;关闭数据库连接对象

DriverManager

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-40ZoGhQ0-1666684508222)(D:\笔记文件\JavaWeb笔记\img\image-20220618154725653.png)]

Connection

事物管理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuBb8KE1-1666684508222)(D:\笔记文件\JavaWeb笔记\img\image-20220618203229001.png)]

Statement

执行MySQL的方法

executeUpdate方法执行DDL,DML数据
executeQuery方法执行DQL数据

ResultSet

是executeQuery执行DQL数据后返回的对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cAruDMlp-1666684508222)(D:\笔记文件\JavaWeb笔记\img\image-20220618211331358.png)]

PreparedStatement

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V9UzuKKV-1666684508223)(D:\笔记文件\JavaWeb笔记\img\image-20220619214836498.png)]

MySQL执行原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAiGPjac-1666684508223)(D:\笔记文件\JavaWeb笔记\img\image-20220620094407673.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ReOrgAUv-1666684508223)(D:\笔记文件\JavaWeb笔记\img\image-20220620094355174.png)]

数据库连接池

connection存储池,一个用户用完connection后返回到connection对应的存储池中循环利用

Driud使用步骤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tnwyNwk-1666684508224)(D:\笔记文件\JavaWeb笔记\img\image-20220620113050385.png)]

Maven的基本使用

环境变量的配置,自己在包中创建一个文件夹(mvn_resp)用于本地仓库

本地Maven的配置

  • bin:二进制的可执行文件,其中mvn最常用
  • boot:一个jar包,maven加载需要用的
  • conf:maven的配置文件,最核心的时setting.xml文件
  • lib:jar包集合,Maven依赖的jar包

配置自己本地仓库的位置,在setting.xml文件中

默认的是
/path/to/local/repo
现在改为(自己设置的位置)
D:\APPDATE\apache-maven-3.6.1-bin\apache-maven-3.6.1\mvn_resp

Maven的进本使用

常用命令

complie:编译
clean:清理
test:测试
package:打包
install:安装

生命周期

Maven坐标

坐标的组成

groupld:组织的名称
artifactld:模块的名称
version:项目的版本号

Maven基础过程

编译,测试,打包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g7iRL7DT-1666684508225)(D:\笔记文件\JavaWeb笔记\img\image-20220621104621966.png)]

Web简介

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pb4e4Ue0-1666684508226)(img/image-20220623173411222.png)]

基础过程

1,用户在浏览器中输入信息,浏览器请求相应的服务器
2,服务器端分为两类
一类是HTML,CSS,JS静态,负责页面展示
另一类为Servlet,JSP动态资源,负责用户方面;同时我们可以通过动态资源获取数据库中的数据将他反应给静态资源中,通过静态资源展现到页面中
3,页面响应给客服端浏览器,浏览器为一个程序,解析页面,用户就可以看到相应的

Web学习介绍

1,HTTP,Tomcat,Servlet;
2,Request,Response
3,JSP,会话技术(Cookie,Session)
4,Filter(过滤器),Listener(监听器)
5,Ajax,Vue,ElementUI

HTTP简介

HTTP:HyperText Transfer protocol 超文本传输协议,规定浏览器和服务器之间数据传输的规则

HTTP特点

HTTP请求数据格式

1,请求行:请求数据第一行。GET表示请求方式,POST
2,请求头:第二行开始,格式为key:value形式
3,请求体:POST请求的最后一部分,存放请求参数
常见的HTTP请求头

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QGMbbZj-1666684508227)(img/image-20220624084532455.png)]

GET请求和PSOT请求的区别
1,GET没有请求体,POST有
2,GET请求参数在请求行中,POST请求参数在请求体中

一、状态码大类

状态码分类说明
1xx响应中——临时状态码,表示请求已经接受,告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx成功——表示请求已经被成功接收,处理已完成
3xx重定向——重定向到其它地方:它让客户端再发起一个请求以完成整个处理。
4xx客户端错误——处理发生错误,责任在客户端,如:客户端的请求一个不存在的资源,客户端未被授权,禁止访问等
5xx服务器端错误——处理发生错误,责任在服务端,如:服务端抛出异常,路由出错,HTTP版本不支持等

状态码大全:https://cloud.tencent.com/developer/chapter/13553

二、常见的响应状态码

状态码英文描述解释
*200OK客户端请求成功,即处理成功,这是我们最想看到的状态码
302Found指示所请求的资源已移动到由Location响应头给定的 URL,浏览器会自动重新访问到这个页面
304Not Modified告诉客户端,你请求的资源至上次取得后,服务端并未更改,你直接用你本地缓存吧。隐式重定向
400Bad Request客户端请求有语法错误,不能被服务器所理解
403Forbidden服务器收到请求,但是拒绝提供服务,比如:没有权限访问相关资源
*404Not Found请求资源不存在,一般是URL输入有误,或者网站资源被删除了
428Precondition Required服务器要求有条件的请求,告诉客户端要想访问该资源,必须携带特定的请求头
429Too Many Requests太多请求,可以限制客户端请求某个资源的数量,配合 Retry-After(多长时间后可以请求)响应头一起使用
431 Request Header Fields Too Large请求头太大,服务器不愿意处理请求,因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。
405Method Not Allowed请求方式有误,比如应该用GET请求方式的资源,用了POST
*500Internal Server Error服务器发生不可预期的错误。服务器出异常了,赶紧看日志去吧
503Service Unavailable服务器尚未准备好处理请求,服务器刚刚启动,还未初始化好
511Network Authentication Required客户端需要进行身份验证才能获得网络访问权限

HTTP响应数据格式

了解

Tomact服务器简介

Tomact简介

封装HTTP协议操作,便于开发
将Web项目部署到服务器中,对外提供网上浏览服务

IDEA中创建Maven Web项目

1,创建项目,在项目中用骨架创建,
2,在main目录下创建java和resources目录

IDEA中使用tomcat

1,使用插件的方法导入tomcat,之后动用maven helper 插件运行tomcat

<plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
      </plugin>
 </plugins>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Servlet

servlet简介

Servlet是Java提供的一门动态web资源开发技术
Servlet是JavaEE提供的规范之一,其中就是一个接口,将来我们要定义Servlet类实现Servlet接口,并由Web服务器运行Servlet

servlet使用步骤

1,导入servlet依赖坐标,其中scrop的参数要用provided

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
</dependency>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2,创建一个类,实现Servlet接口
3,在类上使用@WebServlet接口,重写其中的5个方法,其中service最重要
4,在浏览器中调用

servlet生命周期分为四个阶段

1,加载和实例化:默认情况下,当Servlet第一次被调用时,由服务器创建Servlet对象
2,初始化:在Servlet实例化之后,容器将调用Servlet的init()方法初始化这个对象,完成一些如假爱配置文件、创建连接等初始化的工作。此方法只调用一次
3,请求处理:每次请求Servlet时,Servlet容器都会调用一次service()方法对请求进行处理。
4,服务终端:当需要释放内存或者容器关闭时,容器就会调用Servlet实例的destroy()方法完成资源的释放。在destroy()方法调用之后,容器会释放这个Servlet实例,该实例随后会被Java的垃圾收集器所回收。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RNHS50BD-1666684508228)(img/image-20220628094640832.png)]

HttpServlet使用步骤(进阶)

1,继承HttpServlet
2,重写doGet方法和doPost方法

Servlet urlPattern配置

Servlet要想被访问,必须配置其访问路径

1,一个Servlet,可以配置多个urlPattern路径(注解方式配置)
@WebServlet(urlPatterns={“/demo1”,“/demo2”})

2,urlPattern配置规则

四种匹配规则,其中第一种最为常用(了解)
了解即可

文本配置方法,在web.xml文件中配置信息

<servlet>
    <servlet-name>selectById</servlet-name>
    <serlet-class>com.liu.web.SelectByIdServlet</serlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>selectById</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

ServletContext对象

web容器在启动时,他会为每一个web程序都创建一个对应的ServletContext对象,它代表着当前的web应用

  • 共享数据

常用方法

//获取对象
ServletContext servletContext = this.getServletContext();
//跳转页面,自己的地址不变,但进入的是Url的网页
RequestDispatcher req1 = servletContext.getRequestDispatcher("/url");
req1.forward(req,resp);
//获取文件资源,之后对文件内容进行输出
//1.将文件转为输入流
InputStream inputs = servletContext.getResourceAsStream("/WEB-INF/classes/db.properties");
//2,创建资源加载对象
Properties prop = new Properties();
prop.load(inputs);
//3,
String user = prop.getProperty("username");
String pwd = prop.getProperty("password");
PrintWriter writer = resp.getWriter();
writer.print(user + ":" + pwd);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Requset

Requst继承体系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JbSCwwsh-1666684508228)(img/image-20220628143327140.png)]

常用的方法

//1,       
//获取请求方式:
String method = req.getMethod();
System.out.println(method);
//获取虚拟目录(动态)
String contextPath = req.getContextPath();
System.out.println(contextPath);
//获取URL路径
StringBuffer requestURL = req.getRequestURL();
System.out.println(requestURL.toString());
//获取请求参数
String queryString = req.getQueryString();
System.out.println(queryString);
//2,请求头
String agent = req.getHeader("user-agent");
System.out.println(agent);
//3,请求体,只有在post方法中才有
BufferedReader br = req.getReader();
String line =  br.readLine();
System.out.println(line);
//4,获取请求之前的路径!!!!!!
req.getHeader("Referer");//一般用于重定向
resp.sendRedirect(req.getHeader("Referer"));//可以再回到原来的页面
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

通用方式获取请求参数

Request两种方法是的值获取出来封装在Map<String,String[] >中
我们只需要从Map集合中获取其中的值就可以
常用的方法有三种
1,getParameterMap();获取的Map集合
2,getParameterValues(String name);根据键名称获取参数值(数组)
3,getParameter(String name);更具键名称获取单个的值!!最常用

//1,获取map集合
Map<String, String[]> map = req.getParameterMap();
for (String key : map.keySet()) {
    System.out.print(key+":");
    String[] values = map.get(key);
    for (String value : values) {
        System.out.print(value + " ");
    }
    System.out.println();
}
//2,获取某一个固定的值
String[] hobbies = req.getParameterValues("hobby");
for (String hobby : hobbies) {
    System.out.println(hobby);
}
//3,根据key获取单个的值
String username = req.getParameter("username");
System.out.println(username);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

请求转发

一种在服务器内部实现资源跳转的方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lI1eE95L-1666684508228)(img/image-20220630143300607.png)]

实现方法

//跳转到req2页面中
//转发的实现方法
request.getRequestDispatcher("/req2").forward(request,response);
//常用方法
//1,设置属性
request.setAttribute(String,Object);
request.setAttribute("meg","hello");
//2,获取属性
Object object=new request.getAttribute(String);
//3,删除属性
request.removeAttribute("meg","hello");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

请求转发的特点

  • 浏览器地址栏不会发生变化
  • 只能转发到当前服务器的内部资源
  • 服务器一次请求,可以使用request共享的数据

Response

重定向

         /**
         * 重定向
         * 1,设置状态吗302
         * 2,设置响应头
         */
//       response.setStatus(302);
//       response.setHeader("location","/web-demo1/resp2");
        //简写redirect:重定向
        response.sendRedirect("/web-demo1/resp2");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

重定向特点

  • 浏览器地址栏发生变化
  • 可以重定向到任意的资源(服务器内部,外部均可)
  • 服务器两次请求,不能在多个资源使用request共享数据

乱码情况

当表单传送到服务器时会因中文出现乱码情况

在请求中,用post请求,要先设置

req.setCharacterEncoding("utf-8");
  • 1

在get请求中

在响应中

resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("success");
  • 1
  • 2

JSP

简介

  • java server pages java服务端页面
  • 一种动态的网页技术,其中既可以定义HTML,JS,CSS
  • JSP=HTML+java

JSP本质上是Servlet

快速入门


JSP三种脚本(三种语言输入模式)

1,<%…%>:内容放在_jspService()方法之中
用于写java代码在Java中它是(左右被双引号包裹,打印字符串)
out.write(“<html lang=“en”>\r\n”);

2,<%=…%>:内容放在out.print()中,座位out.print()的。作为输出流的参数
它的本质是没有双引号的,为打印的代码
想要输出字符串要自己写<%=“hello world”%>
out.ptint(100+200)

用于写html页面
3,<%!..%>:内容放在_jspServlet()方法之外,被类直接包含

jsp技术缺点

EL表达式

  • expression Language 表达语言,用于简化JSP页面的JAVA代码
  • 主要功能:获取数据
  • 语法${expression}

JavaWeb的四大域对象:

从小到大为

  1. paga:当前页面有效
  2. rquest:当前请求有效
  3. session:当前会话有效
  4. application:当前应用有效

el表达式会在获取数据时,依次从这4个域中寻找(从小到大查找),直到找到为止

JSTL标签

JSP标准标签库(Jsp Standarded Tag Library),使用标签取代JSP页面上的Java代码

使用步骤:

  1. 导入坐标

  2. jsp文件导入

  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    • 1

4,使用其中的标签,与java对应

因为主键不希望自己填写,自己填写可能出现删除后不连续的现象。所以指利用varStatus里面的属性自定义
属性的方法有很多
属性.index为从0开始;属性.count为从1k
<c:forEach items="${brands}" var="brand" varStatus="status">
  <tr align="center">
      <%--            <td>${brand.id}</td>--%>
    <td>${status.count}</td>
    <td>${brand.brandName}</td>
    <td>${brand.companyName}</td>
    <td>${brand.ordered}</td>
    <td>${brand.description}</td>
        <c:if test="${brand.status==1}">
          <td>启用</td>
        </c:if>

        <c:if test="${brand.status!=1}">
          <td>禁止</td>
        </c:if>
    <td><a href="/brand-demo/selectByIdServlet?id=${brand.id}">修改</a> <a href="/brand-demo/deleteByIdServlet?id=${brand.id}">删除</a></td>
  </tr>
  </c:forEach>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

MVC模式和三层架构

mvc模式

M:Model,业务模型
V:View,试图,图面展示
C:Controller,控制器,处理请求,调用模型和视图

MVC好处

1,指责单一,互不影响
2,有利于分工协作
3,有利于组件重用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mpubinqa-1666684508229)(img/image-20220805140603543.png)]

  • C(Controller)当用户发送请求,调用控制层
  • M(Model)控制层来处理模型JavaBean方面,这其中包括三层架构的Dao层和和service层
  • V(view)控制层经过模型层处理好之后将数据返回给视图层,最后相应给服务器

三层架构

表现层,业务逻辑层,数据访问层(后端层)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3OVm7R5P-1666684508230)(img/image-20220703213450482.png)]

会话

简介

  • 会话:用户打开浏览器访问web服务器的资源,会话建立直到一方断开连接,会话结束。在一次会话中可以包含多次请求和响应
  • 会话跟踪:一种无状态的方法,服务器需要识别多次请求是否来自于同一服务器,以在同一次会话的多次请求间共享数据
  • HTTP协议是无状态的,每次浏览器向服务器请求时,服务器都会将该请求视为新的请求,因此我们需要会话跟踪技术实现会话内数据的共享

cookie:客户端会话跟踪技术
session:服务端会话跟踪技术

cookie

将数据存到客户端,每次请求都携带Cookie数据进行访问

使用方法

//存储数据
Cookie cookie = new Cookie("username","zhangsan");
        resp.addCookie(cookie);
//获取数据
 Cookie[] cookies = req.getCookies();
        for (Cookie cookie1 : cookies) {
            String name = cookie1.getName();
            if (name.equals("username")){
                System.out.println(name+":"+cookie1.getValue());
            }
            break;
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

原理

cook响应时:将键值对存放在set-cookie中
cookie请求时:到请求头中寻找cookie寻找

cookie使用细节

不是每个服务器都能直接获取cookie中的数据的

cookie存在浏览器内容中,当浏览器关闭,内存释放,Cookie被销毁

cookie.setMaxAge();
内容中设置存活的秒数

cookie默认情况下不支持中文,value要想存中文,可以先进行编码,获取值之后再进行解码

Session

Session原理

Session是基于Cookie实现的

当创建Session时,tomcat将session的地址当作一个cookie存入到set-cookie中
浏览器再携带者set-cookie中的值去请求时,就用cookie中的地址值查找对应的Session
如果有Session就会用之前的Session,如果没有会自己创建一个新的Session

Session的使用细节

  • 服务器重启里面的Session对象也不会丢失
  • 钝化:服务器关闭后,tomcat会自动将Session数据写入硬盘的文件中
  • 活化:服务器重启后,从文件中加载数据到Session中

Session销毁

在web.xml中配置
1,设置Session的时间

 <session-config>
    <session-timeout>100</session-timeout>
  </session-config>
  • 1
  • 2
  • 3

2,调用Session的invalidate();方法

总结

Cookie和Session的区别

  • 存储位置:Cookie存在客户端,Session存在服务端
  • 安全性:Cookie不安全,Session安全
  • 数据大小:Cookie最大3KB,Session无大小限制
  • 存储时间:Cookie可以长期存储,Session默认30分钟
  • 服务器性能:Cookie不占用服务器资源,Session占用服务器资源

Filter

  • 概念:FIlter表示过滤器,时JavaWeb三大组件(Servlet,Filter,Listener)之一
  • 过滤器可以把对资源的请求拦截下来,从而实现一些特殊功能
  • 过滤器一般完成一些通用的操作,比如:权限控制,统一编码处理,敏感字符处理等等

Filter使用细节

顾虑连的先后顺序为按照类的首字母进行执行

Listener

  • 三大组件之一
  • 监听器可以监听application,sessioh,request三个对象创建,销毁或者往其中添加修改删除属性时自动执行代码的功能组件
  • LIstener分类:JavaWeb中提供了8个监听器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1NPxfSEQ-1666684508230)(img/image-20220706202352250.png)]

AJAX

简介

  • AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
  • AJAX作用

1,与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据
使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换JSP页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0VWjZ01R-1666684508231)(img/image-20220707082356590.png)]

2,异步交互:可以在不重新加载整个页面的情况下,与服务交换数据并更新部分网页的技术,如:搜索联想,用户名是否可用校验等等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tdHOYTv-1666684508231)(img/image-20220707152153718.png)]

ajax使用

document.getElementById("username").onblur = function() {
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开链接
        let username = document.getElementById("username").value;
        //3.1get请求在url的后面直接加参数
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);
        //3.2post请求将参数放入到send中
        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
//         xhttp.onreadystatechange = function () {
//             if (this.readyState == 4 && this.status == 200) {
//                if(this.responseText=="true"){
//                    //用户名存在
//                    document.querySelector("#username_err").style.display = 'block';
//                    console.log(username);
//                }else {
//                    //用户名不存在
//                    document.querySelector("#username_err").style.display = 'none';
//                }
//
//
//             }
//         };
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
//ajax框架axios使用
axios({
            method:"get",
            url:"http://localhost:8080/ajax-demo/selectUserServlet?username=zhangsan"
        }).then(function (resp) {
            // console.log(resp.data);
            console.log(resp.data.toString()=="true");

            if(resp.data.toString()=="true"){
                //用户名存在
                document.querySelector("#username_err").style.display = 'block';
                console.log(username);
            }else {
                //用户名不存在
                document.querySelector("#username_err").style.display = 'none';
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
 //1.为用户名绑定失去焦点事件
 //  对应的jQuery代码,现在没有引用jQuery文件用不了
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求资源路径
            url:"userServlet",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        });
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

JSON

简介

概念:JavaScript Object Notation。
由于语法简单,层次鲜明,先多用于座位数据载体,在网络中进行数据传输

JSON基础语法

var json= {
"name":"zhangsan",
"age":24,
"addr":["北京","上海","西安"]
};
json.name;
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];
sites[0].name;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

json数据和Java对象的转换

这里使用阿里巴巴提供的Java语言编写的高性能的工具Fastjson

导入坐标

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
    </dependency>
        //将Java转换为JSON
        String jsonStr = JSON.toJSONString(obj);
		//JSON转换为Java对象
		//User实例对象要有get,set方法
		User user = JSON.parseObject(jsonStr,User.class);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

ax({
//请求资源路径
url:“userServlet”,
//是否异步
async:true,
//请求参数
data:“username=”+username,
//请求方式
type:“POST”,
//数据形式
dataType:“text”,
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$(“#uSpan”).html(data);
},
//请求失败后调用的回调函数
error:function () {
alert(“操作失败…”);
}
});
});


# JSON

## 简介

概念:JavaScript Object Notation。
由于语法简单,层次鲜明,先多用于座位数据载体,在网络中进行数据传输

## JSON基础语法

```js
var json= {
"name":"zhangsan",
"age":24,
"addr":["北京","上海","西安"]
};
json.name;
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];
sites[0].name;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

json数据和Java对象的转换

这里使用阿里巴巴提供的Java语言编写的高性能的工具Fastjson

导入坐标

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
    </dependency>
        //将Java转换为JSON
        String jsonStr = JSON.toJSONString(obj);
		//JSON转换为Java对象
		//User实例对象要有get,set方法
		User user = JSON.parseObject(jsonStr,User.class);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号