内网网站如何建设方案,推广新产品最好的方法,东莞工作招聘网最新招聘,江苏赛孚建设工程有限公司网站「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度#xff0c;分享学习笔记#xff0c;希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HT… 「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度分享学习笔记希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HTTP协议-报文 1.6 接口文档 1.7 案例 - 用户登录 1.8 form-serialize 插件 0 课程介绍 P1https://www.bilibili.com/video/BV1MN411y7pw?p1 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 P2https://www.bilibili.com/video/BV1MN411y7pw?p2 什么是 AJAX ? AJAX 是浏览器与服务器进行数据通信的技术 比如浏览器网页中使用 AJAX技术XHR对象发起获取省份列表数据的请求服务器代码响应准备好的省份列表数据给前端前端拿到数据数组以后展示到网页 怎么用 AJAX 先使用 axios 库与服务器进行 数据通信 因为 axios 库语法简单让我们有更多精力关注在与服务器通信上而且后续 VueReact 学习中也使用 axios 库与服务器通信 再学习 XMLHttpRequest 对象的使用了解 AJAX 底层原理 axios 使用 语法 引入 axios.jshttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 使用 axios 函数 传入 配置对象 再用 .then 回调函数接收结果并做后续处理 axios({ url: 目标资源地址}).then((result) { //对服务器返回的数据做后续处理}) 案例 !DOCTYPE htmlhtml langenhead meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAJAX概念和axios使用/title/headbody !-- axios库地址https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 省份数据地址http://hmajax.itheima.net/api/province 目标: 使用axios库, 获取省份列表数据, 展示到页面上 1. 引入axios库 -- p classmy-p/p script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script script // 2. 使用axios函数 axios({ url: http://hmajax.itheima.net/api/province }).then(result { console.log(result) // 好习惯多打印确认属性名 console.log(result.data.list) console.log(result.data.list.join(br)) // 把准备好省份列表插入到页面 document.querySelector(.my-p).innerHTML result.data.list.join(br) }) /script/body/html 1.2 认识 URL P3https://www.bilibili.com/video/BV1MN411y7pw?p3 什么是 URL 定义 例如 URL 的组成 http 协议超文本传输协议规定浏览器和服务器之间传输数据的格式 域名标记服务器在互联网中方位 资源路径标记资源在服务器下的具体位置 1.3 URL 查询参数 P4https://www.bilibili.com/video/BV1MN411y7pw?p4 什么是查询参数 ? 定义浏览器提供给服务器的额外信息让服务器返回浏览器想要的数据 语法http://xxxx.com/xxx/xxx?参数名1值1参数名2值2 举例查询河北省下属的城市列表需要先把河北省传递给服务器 axios 如何携带查询参数? 语法使用 axios 提供的 params 选项 axios({ url: 目标资源地址, params: { 参数名: 值 }}).then(result { // 对服务器返回的数据做后续处理}) 案例获取“河北省”下属的城市列表展示到页面 axios({ url: http://hmajax.itheima.net/api/city, params: { pname: 河北省 }}).then(result { console.log(result.data.list)}) 案例地区查询 P5https://www.bilibili.com/video/BV1MN411y7pw?p5 1.4 常用请求方法和数据提交 P6https://www.bilibili.com/video/BV1MN411y7pw?p6 常用请求方法 请求方法是一些固定单词的英文例如GETPOSTPUTDELETEPATCH这些都是http协议规定的每个单词对应一种对服务器资源要执行的操作 前面我们获取数据其实用的就是 GET 请求方法但是 axios 内部设置了默认请求方法就是 GET我们就没有写 axios 请求配置 url请求的 URL 网址 method请求的方法 GET可以省略不区分大小写 data提交数据 axios({ url: 目标资源地址, method: 请求方法, data: { 参数名: 值 }}).then(result { // 对服务器返回的数据做后续处理}) 案例注册账号提交用户名和密码到服务器保存 axios({ url: http://hmajax.itheima.net/api/register, method: POST, data: { username: itheima007, password: 7654321 }}) axios 错误处理 P7https://www.bilibili.com/video/BV1MN411y7pw?p7 如果注册相同的用户名则会遇到注册失败的请求也就是 axios 请求响应失败了你会在控制台看到如图的错误 因为普通用户不会去控制台里看错误信息我们要编写代码拿到错误并展示给用户在页面上 语法在 then 方法的后面通过点语法调用 catch 方法传入回调函数并定义形参 axios({ // ...请求选项}).then(result { // 处理成功数据}).catch(error { // 处理失败错误}) 案例重复注册时通过弹框提示用户错误原因 axios({ url: http://hmajax.itheima.net/api/register, method: post, data: { username: itheima007, password: 7654321 }}).then(result { // 成功 console.log(result)}).catch(error { // 失败 // 处理错误信息 console.log(error) console.log(error.response.data.message) alert(error.response.data.message)}) 1.5 HTTP协议-报文 P8https://www.bilibili.com/video/BV1MN411y7pw?p8 HTTP 协议规定了浏览器发送及服务器返回内容的格式 请求报文浏览器按照 HTTP 协议要求的格式发送给服务器的内容 请求报文的组成部分有: 请求行请求方法URL协议 请求头以键值对的格式携带的附加信息比如Content-Type 空行分隔请求头空行之后的是发送给服务器的资源 请求体发送的资源 通过 Chrome 的网络面板查看请求报文: 请求报文-错误排查 P9https://www.bilibili.com/video/BV1MN411y7pw?p9 HTTP 协议-响应报文 P10https://www.bilibili.com/video/BV1MN411y7pw?p10 响应报文服务器按照 HTTP 协议要求的格式返回给浏览器的内容 响应报文的组成 响应行状态行协议、HTTP 响应状态码、状态信息 响应头以键值对的格式携带的附加信息比如Content-Type 空行分隔响应头空行之后的是服务器返回的资源 响应体返回的资源 HTTP 响应状态码用来表明请求是否成功完成 比如404服务器找不到资源 通过 Chrome 的网络面板查看响应报文: 1.6 接口文档 P11https://www.bilibili.com/video/BV1MN411y7pw?p11 接口文档描述接口的文章一般是后端工程师编写和提供 接口指使用 AJAX 和 服务器通讯时使用的 URL请求方法以及参数例如 AJAX阶段接口文档: https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8 1.7 案例 - 用户登录 P12https://www.bilibili.com/video/BV1MN411y7pw?p12 P13https://www.bilibili.com/video/BV1MN411y7pw?p13 1.8 form-serialize 插件 P14https://www.bilibili.com/video/BV1MN411y7pw?p14 P15https://www.bilibili.com/video/BV1MN411y7pw?p15 我们前面收集表单元素的值是一个个标签获取的,如果一套表单里有很多很多表单元素如何一次性快速收集出来呢使用 form-serialize 插件提供的 serialize 函数就可以办到。 form-serialize 插件语法 引入 form-serialize 插件到自己网页中 使用 serialize 函数 参数1要获取的 form 表单标签对象要求表单元素需要有 name 属性-用来作为收集的数据中属性名 参数2配置对象 hash true - 收集出来的是一个 JS 对象结构 false - 收集出来的是一个查询字符串格式 empty true - 收集空值 false - 不收集空值 const form document.querySelector(.example-form)const data serialize(form, { hash: true, empty: true }) 「结束」 本文由 mdnice 多平台发布
