项目整合 - 课程管理模块和课程内容管理模块

前后端分离架构

前后端分离已成为互联网项目开发的业界标准使用方式，将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS等）打下坚实的基础。

前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的API接口，并通过JSON数据进行交互。

接口文档

什么是接口文档

在我们的项目中使用的是前后端分离开发方式，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直进行接口文档的维护。

为什么要写接口文档？

项目开发过程中前后端工程师有一个统一的文件进行沟通交流,并行开发
项目维护中或者项目人员更迭，方便后期人员查看、维护

接口规范是什么？

一个接口的描述至少包括下面几项:

名称: findCourseList
描述: 根据条件查询课程信息
URL: http://localhost:8080/lagou_edu_home/course/
请求方式: GET
请求参数

methodName:"findCourseList";

响应结果

{
"status": "0",
"msg": "success"
}

前后端耦合的缺陷 (以JSP为例)

UI出好设计图之后，前端开发工程师只负责将设计图切成HTML，需要由Java开发工程师来将HTML套成JSP页面，修改问题的时候需要双方协同开发，效率低下。
JSP页面必须要在支持Java的WEB服务器上运行（如Tomcat、Jetty等），无法使用Nginx等（官方宣称单实例HTTP并发高达5W），性能提升不上来。
第一次请求JSP，必须要在WEB服务器中编译成Servlet，第一次运行会较慢。之后的每次请求JSP都是访问Servlet再用输出流输出的HTML页面，效率没有直接使用HTML高

前后端分离的优势

前后端分离的模式下，如果发现Bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象
前后端分离可以减少后端服务器的并发/负载压力。除了接口以外的其他所有HTTP请求全部转移到前端Nginx上，接口的请求则转发调用Tomcat.
前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
前后端分离会更加合理的分配团队的工作量，减轻后端团队的工作量，提高了性能和可扩展性。

前端技术选型

前端技术	说明
**Vue.js**	是一套用于构建用户界面的渐进式**JavaScript框架**
**Element UI库**	element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，<br>方便程序员进行页面快速布局和构建
**node.js**	简单的说 Node.js 就是运行在服务端的 JavaScript 运行环境 .
**axios**	对ajax的封装, 简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，

后端技术选型

后端技术	说明
**Web层**	a) Servlet：前端控制器<br />b) Filter：过滤器 <br />c) BeanUtils：数据封装
**Service层**	a) 业务处理
**dao层**	a) Mysql：数据库<br />b) Druid：数据库连接池<br />c) DBUtils: 操作数据库

Maven 项目管理工具

什么是Maven

Maven是一个跨平台的项目管理工具。作为Apache组织的一个颇为成功的开源项目，其主要服务于基于Java平台的项目创建，依赖管理和项目信息管理。maven是Apache的顶级项目，解释为“专家，内行”，它是一个项目管理的工具，maven自身是纯java开发的，可以使用maven对java项目进行构建、依赖管理。

Maven的作用

依赖管理

依赖管理

依赖指的就是是我们项目中需要使用的第三方Jar包, 一个大一点的工程往往需要几十上百个Jar包,按照我们之前的方式,每使用一种Jar,就需要导入到工程中,还要解决各种Jar冲突的问题.

Maven可以对Jar包进行统一的管理,包括快速引入Jar包,以及对使用的 Jar包进行统一的版本控制

一键构建项目

之前我们创建项目,需要确定项目的目录结构,比如src 存放Java源码, resources存放配置文件,还要配置环境比如JDK的版本等等,如果有多个项目那么就需要每次自己搞一套配置,十分麻烦

Maven为我们提供了一个标准化的Java项目结构,我们可以通过Maven快速创建一个标准的Java项目.

Maven的仓库分类

本地仓库: 位于自己计算机中的仓库, 用来存储从远程仓库或中央仓库下载的插件和 jar 包，
远程仓库: 需要联网才可以使用的仓库，阿里提供了一个免费的maven 远程仓库。
中央仓库: 在 maven 软件中内置一个远程仓库地址 http://repo1.maven.org/maven2 ，它是中央仓库，服务于整个互联网，它是由 Maven 团队自己维护，里面存储了非常全的 jar 包，它包含了世界上大部分流行的开源项目构件

配置阿里云远程仓库

Maven默认的远程仓库是在国外, 所以下载jar包时速度会非常慢, 这里推荐大家使用我大天朝的阿里云仓库

1) 打开 settings.xml,找到 <mirrors> 标签 , 下面的内容复制到 <mirrors> 中即可

<mirror>
    <id>alimaven</id>
    <name>aliyun maven</name>
    <url>
        http://maven.aliyun.com/nexus/content/groups/public/
    </url>
    <mirrorOf>central</mirrorOf>        
</mirror>

2)一个Maven工程就是由groupId，artifactId和 version 作为唯一标识, 我们在引用其他第三方库的时候，也是通过这3个变量确定。

坐标的概念
- 在maven中坐标就是为了定位一个唯一确定的jar包。
- maven世界拥有大量构建，我们需要找一个用来唯一标识一个构建的统一规范，拥有了统一规范，就可以把查找工作交给机器
Maven坐标主要组成(GAV) - 确定一个jar在互联网位置

标签	含义
**groupId**	定义当前Maven组织名称,通常是公司名
**artifactId**	定义实际项目名称
**version**	定义当前项目的当前版本
**packaging**	打包类型<br />jar：执行 package 会打成 jar 包 war：执行 package 会打成 war 包
**dependency**	使用 ``<dependency>` `声明一个依赖后，Maven就会自动下载这个依赖包

3)maven 的依赖管理, 是对项目所依赖的 jar 包进行统一管理。

标签	含义
**dependencies**	表示依赖关系
**dependency**	使用 ``<dependency>` `声明一个依赖后，Maven就会自动下载这个依赖包

添加插件

    <!-- properties 是全局设置,可以设置整个maven项目的编译器 JDK版本 -->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!-- 重点  -->
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
    </properties>

    <!-- 在build中 我们需要指定一下项目的JDK编译版本,maven默认使用1.5版本进行编译
    注意 build 与 dependencies是平级关系,标签不要写错位置  -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <release>11</release>
                </configuration>
            </plugin>
        </plugins>
    </build>

Maven的常用命令

一个maven项目生命周期

使用 maven 完成项目的构建，项目构建包括：清理、编译、测试、部署等过程，maven 将这些过程规范为一个生命周期，如下所示是生命周期的各各阶段：

maven 通过执行一些简单命令即可实现上边生命周期的各个过程

命令	说明
**mvn compile**	完成编译操作 , 执行完毕后，会生成target目录，该目录中存放了编译后的字节码文件。
**mvn clean**	执行完毕后，会将target目录删除.
**mvn test**	执行完毕后，会在target目录中生成三个文件夹：<br />surefire、surefire-reports（测试报告）、test-classes（测试的字节码文件）
**mvn package**	完成打包操作, 执行完毕后，会在target目录中生成一个文件，该文件可能是 jar、war
**mvn install**	执行 mvn install命令，完成将打好的jar包安装到本地仓库的操作 ,<br /> 执行完毕后，会在本地仓库中出现安装后的jar包，方便其他工程引用

1.根据pom.xml文件重新导入所有Maven项目和依赖,刷新
2.创建源码（重新编译）并更新目录
3.下载源码或文档
4.添加Maven项目
5.执行生命周期中的阶段，选中lifecycle选项中生命周期中的一个阶段（phase），才能点击执行。
6.运行Maven生命周期或插件
7.切换离线模式，就是关闭和远程仓库的链接，从本地仓库中获取，也不能将jar包提交到远程仓库
8.是否跳过测试，点击选中就可以跳过测试，在点击选择取消跳过测试
9.展示当前选中的maven项目jar包的依赖，并且可以直接在图形化依赖图上进行排除依赖操作
10.收起下面展开的视图
11.跳转到maven的Setting页面

A 依赖 B，需要在 A 的 pom.xml 文件中添加 B 的坐标，添加坐标时需要指定依赖范围，依赖范围包括：

依赖范围	说明
compile	编译范围，指 A在编译时依赖 B，此范围为默认依赖范围。编译范围的依赖会用在编译、测试、运行，由于运行时需要所以编译范围的依赖会被打包。
provided	provided 依赖只有在当 JDK 或者一个容器已提供该依赖之后才使用， provided 依赖在编译和测试时需要，在运行时不需要，比如：servlet api 被 tomcat 容器提供。
runtime	runtime 依赖在运行和测试系统的时候需要，但在编译的时候不需要。比如：jdbc 的驱动包。由于运行时需要所以 runtime 范围的依赖会被打包。
test	test 范围依赖在编译和运行时都不需要，它们只有在测试编译和测试运行阶段可用，比如：junit。由于运行时不需要所以test范围依赖不会被打包。
system	system 范围依赖与 provided 类似，但是你必须显式的提供一个对于本地系统中 JAR 文件的路径，需要指定 systemPath 磁盘路径，system依赖不推荐使用。

Lombok常用注解

@Getter/@Setter: 作用类上，生成所有成员变量的getter/setter方法
@ToString : 作用于类，覆盖默认的toString()方法 ,可以通过of属性限定显示某些字段，通过exclude属性排除某些字段
@AllArgsConstructor：生成全参构造器
@NoArgsConstructor：生成无参构造器
@Data: 该注解使用在**类**上，该注解会提供 `getter`、`setter`、`equals`、`hashCode`、`toString` 方法。

JSON

JSON的特点:

JSON 是一种轻量级的数据交换格式。
JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。
JSON易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

XML与JSON的区别

XML : 可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言。
JSON: (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
相同点:
- 它们都可以作为一种数据交换格式。
二者区别:
- XML是重量级的，JSON是轻量级的,XML在传输过程中比较占带宽，JSON占带宽少，易于压缩。
- XML和json都用在项目交互下，XML多用于做配置文件，JSON用于数据交互
- JSON独立于编程语言存在,任何编程语言都可以去解析json

JSON语法格式

外面由{}括起来
数据以"键：值"对的形式出现（其中键多以字符串形式出现，值可取字符串，数值，甚至其他json对象）
每两个"键：值"对以逗号分隔（最后一个"键：值"对省略逗号

　　 4. 参数值如果是string类型，就必须加引号，如果是数字类型，引号可加可不加

遵守上面4点，便可以形成一个json对象。

FastJson介绍

Fastjson 是一个 Java 库，可以将 Java 对象转换为 JSON 格式，当然它也可以将 JSON 字符串转换为 Java 对象。
FastJson特点如下：
- 能够支持将java bean序列化成JSON字符串，也能够将JSON字符串反序列化成Java bean。
- 顾名思义，FastJson操作JSON的速度是非常快的。
- 无其他包的依赖, 使用比较方便。

FastJson的使用

在Maven项目中使用FastJson库，需要提前在Maven的配置文件中添加此FastJson包的依赖

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

<dependency>
    <groupId>com.colobu</groupId>
    <artifactId>fastjson-jaxrs-json-provider</artifactId>
    <version>0.3.1</version>
</dependency>

将 Java 对象转换为 JSON 格式

可以使用 JSON.toJSONString() 将 Java 对象转换换为 JSON 对象

Fastjson中的 @JSONField 注解

通过 @JSONField 我们可以自定义字段的名称进行输出，并控制字段的排序，还可以进行序列化标记。

指定name属性, 字段的名称
使用 ordinal属性, 指定字段的顺序
使用 serialize属性, 指定字段不序列化

JSON 字符串转换为 Java 对象

JSON.parseObject()
- 可以使用 **JSON.parseObject()** 将 JSON 字符串转换为 Java 对象。
- 注意反序列化时为对象时，必须要有默认无参的构造函数，否则会报异常
JSON.parseArray()
- 可以使用 **JSON.parseArray()** 将 JSON 字符串转换为集合对象。

总结一

https://static.app.yinxiang.com/embedded-web/profile/#/join?guid=4164390e-85f8-4191-b5de-81c4dff77cec&channel=copylink&shardId=s71&ownerId=33307020

逻辑删除

逻辑删除的本质是修改操作，所谓的逻辑删除其实并不是真正的删除，而是在表中将对应的是否删除标识,做修改操作。比如: 0是未删除，1是删除。在逻辑上数据是被删除的，但数据本身依然存在库中。

物理删除

物理删除就是真正的从数据库中做删除操作了。

接口开发规范

我们在做的是一个前后端分离项目、需要通过接口文档对接的项目. 所以开发过程中要仔细查看前端所需的api接口和参数字段

为了严格按照接口进行开发，提高效率，对请求及响应格式进行规范化。

开发规范

2、post请求时有三种数据格式，可以提交form表单数据和 Json数据（ContentType=application/json），文件等多部件类型（multipart/form-data）三种数据格式 . jsonl类型的数据 Servlet中使用 fastjson进行解析
3、响应结果统一格式为json

开发规范
1、get 请求时，采用key/value格式请求，Servlet中可以使用 getParameter() 获取。
2、post请求时有三种数据格式<br />第一种: Json数据 ,jsonl类型的数据 Servlet中使用 fastjson进行解析<br />第二种: 提交form表单数据<br />第三种: 文件等多部件类型（multipart/form-data）
3、响应结果统一格式为json

为什么使用JSON?

数据格式比较简单, 易于读写, JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

本项目使用的是 JSON解析工具为阿里巴巴的fastjson, maven工程导入下面的依赖即可.

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

<dependency>
    <groupId>com.colobu</groupId>
    <artifactId>fastjson-jaxrs-json-provider</artifactId>
    <version>0.3.1</version>
</dependency>

文件上传介绍

文件上传的实质：文件的拷贝

文件上传：从本地将文件拷贝到服务器磁盘上
- 客户端: 需要编写文件上传表单
- 服务端: 需要编写代码接受上传的文件

文件上传三要素:

1.表单提交方式: post (get方式提交有大小限制,post没有)
2.表单的enctype属性:必须设置为 multipart/form-data.
- enctype就是encodetype就是编码类型的意思.
- multipart/form-data是多部件文件上传 , 指表单数据有多部分构成，既有文本数据，又有文件等二进制数据的意思。
3.表单必须有文件上传项: file ,必须要有name属性和值

注意: 默认情况下，表单的enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
        表单提交必须是POST ,
        表单的enctype属性:必须设置为   multipart/form-data.
        input的type类型必须指定为: file, 一定要有name属性
        --%>
    <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="upload">
        <br>
        <input type="text" name="name">
        <input type="text" name="password">
        <input type="submit" value="文件上传">
    </form>
</body>
</html>

服务端获上传的文件

通过request获取请求体的内容
解析请求体多部件上传的特点是,每个input都是一个表单项.

根据分隔符将请求中所有的内容,切割成数组,数组中的每一个元素都是一个表单项
遍历数组,分清楚那个是普通的表单项, 哪个是文件上传项

如何区分? 判断是否有 filename
获取到普通表单项中的内容,通过属性name获取
获取文件上传项内容

文件名: filname = aaa.txt

文件内容:
使用IO将文件内容,保存到服务器中

FileUpload工具类

FileUpload包可以很容易地将文件上传到你的Web应用程序.

IOUtils封装了Java中io的常见操作，使用十分方便 ,需要下载 commons-io-1.4.jar 包

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.4</version>
</dependency>

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>

FileUpload 核心类介绍

类名	介绍
DiskFileItemFactory	磁盘文件项工厂, 读取文件时相关的配置,比如: 缓存的大小 , 临时目录的位置
ServletFileUplaod	文件上传的一个核心类
FileItem	代表每一个表单项

文件上传的API的详解

ServletFileUpload

方法	说明
isMultipartContent(request);	判断是否是一个文件上传的表单
parseRequest(request);	解析request获得表单项的集合
setHeaderEncoding("UTF-8");	设置上传的文件名的编码方式

FileItem

方法	说明
isFormField()	判断是否是普通表单项
getFieldName()	获得表单的name属性值
item.getString()	获得表单的value值
getName()	获得上传文件的名称
getInputStream()	获得上传文件
delete()	删除临时文件

文件上传后台代码编写

FileUpload使用步骤:

1、创建磁盘文件项工厂

2、创建文件上传的核心类

3、解析request---获得文件项集合

4、遍历文件项集合

5、判断普通表单项/文件上传项

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try {
            //1.创建磁盘文件项工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();

            //2.创建文件上传核心类
            ServletFileUpload upload = new ServletFileUpload(factory);
            //2.1 设置上传文件名的编码
            upload.setHeaderEncoding("utf-8");
            //2.2 判断表单是否是文件上传表单
            boolean multipartContent = upload.isMultipartContent(req);
            //2.3 是文件上传表单
            if(multipartContent){

                //3. 解析request ,获取文件项集合
                List<FileItem> list = upload.parseRequest(req);

                if(list != null){
                    //4.遍历获取表单项
                    for (FileItem item : list) {
                        //5. 判断是不是一个普通表单项
                        boolean formField = item.isFormField();
                        if(formField){
                            //普通表单项, 当 enctype="multipart/form-data"时, request的getParameter()方法 无法获取参数
                            String fieldName = item.getFieldName();
                            String value = item.getString("utf-8");//设置编码
                            System.out.println(fieldName + "=" + value);
                        }else{

                            //文件上传项
                            //文件名
                            String fileName = item.getName();
                            //避免图片名重复 拼接UUID
                            String newFileName = UUIDUtils.getUUID()+"_"+ fileName;

                            //获取上传文件的内容
                            InputStream in = item.getInputStream();

                            String path = this.getServletContext().getRealPath("/");
                            
                            //获取到 webapps路径
                            String webappsPath = path.substring(0, path.indexOf("lagou_edu_home"));
                            OutputStream out = new FileOutputStream(webappsPath+"/upload/"+newFileName);
                            //拷贝文件到服务器
                            IOUtils.copy(in,out);

                            out.close();
                            in.close();
                        }

                    }
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }

    }

BeanUtils工具类

BeanUtils 是 Apache commons组件的成员之一，主要用于简化JavaBean封装数据的操作。可以将一个表单提交的所有数据封装到JavaBean中。

<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.8.3</version>
</dependency>

BeanUtils 对象常用方法

方法	描述
populate(Object bean, Map properties)	将Map数据封装到指定Javabean中，<br />一般用于将表单的所有数据封装到javabean
setProperty(Object obj,String name,Object value)	设置属性值
getProperty(Object obj,String name)	获得属性值

Ajax

传统的网页如果需要更新内容，必须重载整个网页页面。每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。这种方式的缺点是:

性能会有所降低 (一点内容，刷新整个页面！)
用户的操作页面会中断(整个页面被刷新了)

什么是Ajax

Ajax 即"Asynchronous Javascript And XML"，是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML。

Ajax是客户端与服务器进行交互时，可以【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

Ajax 的作用

Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。

Ajax的好处

减轻服务器负担，按需要获得数据。
无刷新更新页面，减少用户的实际和心理的等待时间。
只更新部分页面，有效利用带宽
主流浏览器都支持Ajax

异步与同步

浏览器访问服务器的方式
- 同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
- 异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作

JS方式ajax的实现(了解)

JS的ajax：出现最早。使用一个对象XmlHttpRequest对象。专门用于进行ajax请求发送，和响应的接收

使用ajax发请求，使用ajax接收响应，使用JS进行页面刷新。

缺点:
- 若使用JS的AJAX技术，为了实现简单功能，就需要书写大量复杂代码。
- JS的AJAX代码，浏览器兼容性比较差。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>

    <script>
        function run() {
            //1.创建 核心对象
            var xmlhttp;

            //2.判断浏览器类型
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            //3.建立连接
            /**
             * 三个参数:
             *      1.请求方式 get post
             *      2.请求资源的路径
             *      3.是否为异步 是 or 否
             */
            xmlhttp.open("GET","/login?username=tom",true);

            //4.发送请求
            xmlhttp.send();

            //5.获取响应结果
            /**
             * 什么时候获取响应数据?
             *      在服务器响应成功后获取
             */
            //监听readyState状态改变
            xmlhttp.onreadystatechange=function() {
                //readyState==4 响应已经就绪, 200 访问成功
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    //获取响应数据
                    var text = xmlhttp.responseText;
                    alert(text);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="run()"><br>
    局部刷新 <input type="text">
</body>
</html>

jQuery框架的ajax

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大.

与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种：POST GET AJAX

GET请求方式

$.get(url,data,callback,type)

参数1: url 请求路径
参数2: data 请求时携带的数据格式: key=value 或者 {username=’baby’,pwd:666}
参数3: callback 响应成功后的回调函数
参数4: type 响应的数据类型 text html xml json

//JQuery get方式发送异步请求
function run2() {
    //1.参数1 url
    var url = "/login";

    //2.参数2 数据
    var data = {username:"jack"};

    //3.发送get请求
    $.get(url,data,function (param) {
        //data响应回来的内容体
        alert("响应成功! 响应数据: " + param);
    },"text");
}

POST请求方式

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax

Post请求方式语法

$.post(url,data,callback,type) 里面的四个参数和get方式是一样, 不一样的是请求方式的不同

//JQuery post方式发送异步请求
function run3() {
    //1.参数1 url
    var url = "/login";

    //2.参数2 数据
    var data = {username:"lucy"};

    //3.发送get请求
    $.post(url,data,function (param) {
        //data响应回来的内容体
        alert("响应成功! 响应数据: " + param);
    },"text");
}

Ajax请求方式

$.ajax()方法可以更加详细的设置底层的参数。该方法通常用于其他方法不能完成的请求。

ajax请求方式语法:

方式1: jQuery.ajax({[settings]})
方式2: $.ajax({})

settings是一个js字面量形式的对象，格式是键值对{name:value,name:value }，常用的name属性名如下：

//Ajax方式 发送请求
function run4() {
     $.ajax({
         url:"/login",
         async:true, //是否异步
         data:{username:"tom"},
         type:"POST", //请求方式
         dataType:"text", //返回数据的数据类型
         success:function (param) {
             alert("响应成功!! " + param)
         },
         error:function () {
             alert("响应失败!!")
         }
     });
}

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

posted @ 2021-02-15 12:42 君莫笑我十年游阅读(396) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

历史上的今天：
2020-02-15 SpringBoot整合Mybatis完整详细版

公告

Document

您的浏览器不兼容canvas

昵称：君莫笑我十年游
园龄： 5年9个月
粉丝： 11
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

曾鸿发