ajax第二天Ajax 服务器与客户端服务器： 1.本质：一台电脑上网看到的内容，在网络当中的一台电脑上，我们称

Ajax

服务器与客户端

服务器：

1.本质：一台电脑

上网看到的内容，在网络当中的一台电脑上，我们称这台电脑为服务器。

2.作用

存储一个网站的文件

提供网站的文件给用户

3.资源

服务器上的网页、图片、音乐、视频等。即服务器存储的所有内容。

客户端

1.概念：开发中客户端特指 web 浏览器

2.作用：将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用

3.URL: 表示服务器上每个资源的确切位置

通信方式

请求方式

注意：这只是规范化语义化操作，后续需要哪种请求方式还要看接口文档给的信息.

请求方式	含义
GET	从服务器获取数据
POST	从服务器新增数据
DELETE	删除服务器上的数据
PUT	更新服务器上的数据（侧重完整更新）
PATCH	更新服务器上的数据（侧重部分更新）

AJax 基本使用

1.引用axios 库： www.axios-http.cn/

2.基本语法

axios({
    url: 'http://www.itcbc.com:3006/api/getbooks',  // url地址
    method: 'get',  // 请求方式
}).then((res) => {
    // 打印服务器传递回来的数据
    console.log(res)
})

2.基本语法

axios({
    url: 'http://www.itcbc.com:3006/api/getbooks',  // url地址
    method: 'get',  // 请求方式
}).then((res) => {
    // 打印服务器传递回来的数据
    console.log(res)
})

3.get请求delete 请求

params: {
    bookname: '我的奋斗'
}

在 params 对象中指定查询参数即可，有多个参数用逗号隔开

POST 请求、 PUT 请求、 PATCH 请求
```
data:{
	book:'',
	people:''
}
```

接口相关概念

1 使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）

接口文档概念

接口文档就是接口的使用说明书，它是我们调用接口的依据

接口文档格式

接口名称接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口

接口 URL 客户端发起 Ajax 调用此接口时，请求的 URL 地址

请求方式接口的请求方式，如：GET、POST、PUT、DELETE 等

请求参数请求此接口时，需要发送到服务器的查询参数或请求体

返回示例当接口请求成功后，服务器响应回来的数据的基本格式

返回参数说明接口响应结果的详细描述

`form` 表单

form标签的属性一览表

属性	可选值	说明
action	接口的url	把表单数据，提交哪个接口
method	get或post	数据提交方式（默认值为get）
enctype	application/x-www-form-urlencodedmultipart/form-datatext/plain（很少用）	数据的编码格式。具体指的是：
把表单数据提交给服务器之前，如何对将要提交的数据进行编码（默认值 application/x-www-form-urlencoded）

注意：enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！

以 GET 方式提交表单数据

在

标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：

注意：由于 method 属性的默认值就是 GET，因此上述的 method="GET" 可以被省略！

以 POST 方式提交表单数据

在标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded：

注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略

表单提交的问题

产生问题的原因：

表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。

解决方案：

表单只负责采集数据；
ajax负责将数据提交到服务器。（复合单一的原则）

通过 Ajax 提交表单数据

通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。

监听表单的 submit 提交事件
阻止默认提交行为
基于 axios 发起请求
指定请求方式、请求地址
指定请求体数据

jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下： $('表单元素的选择器').serialize();

Query 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：

$('表单元素的选择器').serialize();

ajax第二天