厦门外贸公司做网站,网站顶部导航文件代码在吗,长沙网页培训,建设网站作用Ajax_01笔记
前置知识点 在JavaScript中 问题1#xff1a;将数组转为字符串#xff0c;以及字符串转为数组的方式。 问题2、将对象转为字符串#xff0c;以及字符串转为对象的方法。 方法#xff1a; 问题1#xff1a; 将数组转为字符串可以使用 join() 方法。例如将数组转为字符串以及字符串转为数组的方式。 问题2、将对象转为字符串以及字符串转为对象的方法。 方法 问题1 将数组转为字符串可以使用 join() 方法。例如var array [1, 2, 3]; var str array.join(,);将数组 [1, 2, 3] 转为字符串 1,2,3。将字符串转为数组可以使用 split() 方法。例如var str 1,2,3; var array str.split(,);将字符串 1,2,3 转为数组 [1, 2, 3]。 问题2 将对象转为字符串可以使用 JSON.stringify() 方法。例如var obj {name: John, age: 25}; var str JSON.stringify(obj);将对象 {name: John, age: 25} 转为字符串 {\name\:\John\,\age\:25}。将字符串转为对象可以使用 JSON.parse() 方法。例如var str {\name\:\John\,\age\:25}; var obj JSON.parse(str);将字符串 {\name\:\John\,\age\:25} 转为对象 {name: John, age: 25}。请注意字符串必须符合 JSON 格式的要求。 01_什么是Ajax和axios使用
定义 AjaxAsynchronous JavaScript and XML是一种用于创建交互式Web应用程序的技术。它通过在不重新加载整个页面的情况下与服务器通信实现异步数据传输和更新。使用Ajax可以在用户与网页交互时向服务器发送请求并接收响应然后使用JavaScript动态更新页面的部分内容。这样可以提供更流畅和高效的用户体验减少了不必要的页面刷新。Ajax广泛用于创建各种Web应用如动态表单验证、自动补全搜索、实时更新等。它基于Web标准技术包括HTML、CSS、JavaScript和XML/JSON数据格式。 怎么学习Ajax? 先使用axios库与服务器进行数据通行。 基于XMLHttpRequest封装、代码简单使用次数高。Vue、React项目中都会用到axios。 在学习XMLHttpRequest对象的使用了解Ajax底层原理。 axios的使用
语法 引入axios.js官方库地址 https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 得到一个全局的axios函数。 使用axios函数 传入配置对象。在用.then回调函数接收服务器返回的结果并做出后续处理。 代码示例
需求请求目标资源地址拿到省份列表数据显示到页面。
目标资源地址http://hmajax.itheima.net/api/province body!-- axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址: http://ajax-api.itheima.net/api/province目标使用axios库获取省份列表数据展示到页面上--p classisP/p!-- 引入axios库 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 引入后得到一个axios函数并使用axios函数axios({// 资源路径地址url: http://ajax-api.itheima.net/api/province}).then(result { //result为回调函数的形参// 查看服务器返回的调函数console.log(result)// 查看返回值里面的内容console.log(result.data.data)// 查看返回中message的返回状态console.log(result.data.message)// 将返回的数组转为字符串console.log(result.data.data.join(br))// 插入到标签容器中渲染视图document.querySelector(.isP).innerHTML result.data.data.join(br)})/script
/body 02_认识URL
URL统一资源定位符简称网址用于访问网络上的资源。
新闻数据地址: http://hmajax.itheima.net/api/news
http是协议hmajax.itheima.net是域名api/news是资源路径地址
03_查询参数
params查询参数 params是一个查询参数对象语法格式为params: {参数名值} 。参数名是接口文档中提供的。 作用使用查询参数提供额外信息获取对应的数据。 使用params 里面添加携带的参数名和参数值即可。 代码演示 p/p!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptaxios({url: http://hmajax.itheima.net/api/city,// 携带查询参数params: {pname: 浙江省 //后期这里输入的查询值就是让 用户输入的。}}).then(result {console.log(result.data.list)document.querySelector(p).innerHTML result.data.list.join(br)})/script04_查询地区案例
需求根据用户输入的省份和市区查询该市区的数据并渲染到容器视图中。
代码示例 script/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 获取用户需要查询的内容值const province document.querySelector(.province)const city document.querySelector(.city)// 1、这个模块功能是从用户点击事件开始所以先绑定点击事件document.querySelector(.sel-btn).addEventListener(click, () {// 2、点击完后就执行axios函数axios({// 3、向服务器发送查询请求url: http://hmajax.itheima.net/api/area,// 4、携带用户输入的查询参数params: {pname: province.value,cname: city.value}}).then(result {console.log(result.data.list)console.log(result.data.message)const list result.data.list// 5、将返回的数组使用map方法操作插入到标签中然后返回新的数组将新的数组转为字符串形式const res list.map(item li classlist-group-item${item}/li).join() //得到了操作后的新数组在转字符串// 6、 将map返回的新数组插入到页面视图中document.querySelector(.list-group).innerHTML resconsole.log(res)})})/script map语句的详细解释: 首先我们有一个res数组。通过map方法对数组中的每个元素进行处理。箭头函数表达式(item ${item})接收一个参数 item并返回一个字符串模板生成一个带有 item值的 li元素。 然后通过join()方法将所有处理后的字符串连接在一起形成一个字符串。 最终我们得到一个名为theLi的字符串其中包含了循环处理后的li元素。 05_常用请求方法和数据提交
method: 请求方法GET可以省略不写不区分大小写
data提交数据 需求 注册用户: url: http://hmajax.itheima.net/api/register, 请求方法: POST 参数名: username: 用户名 (中英文和数字组成, 最少8位) password: 密码 (最少6位) 目标: 点击按钮, 通过axios提交用户和密码, 完成注册 代码示例 // 1、注册点击事件document.querySelector(.btn).addEventListener(click, () {// 2、使用axios函数发送请求axios({url: http://hmajax.itheima.net/api/register,// 3、声明请求方法method: POST,// 4、提交数据data: {username: itheima007,password: 7654321}}).then(result { // 5、查看浏览器响应的结果// 浏览器响应状态信息console.log(result.data.message) //无账号console.log(result.data) })})需要提交数据就得使用post 同时使用data携带需要提交的参数 params是查询的参数不要混淆了 06_axios错误处理
在then方法后面写一个catch方法传入回调函数并定义形参
代码示例
.then(result {console.log(result)}).catch(error {// 错误信息处理console.log(error)console.log(error.response.data.message)})console.log(error.response.data.message) 就能得到具体的错误信息我们可以将返回的信息通过弹窗返回给用户
07_HTTP协议-请求报文
http协议规定了浏览器发送及服务器返回内容的格式。
请求报文
请求报文浏览器按照http协议要求的格式发送给服务器的内容就是axios里面的内容。
请求报文的组成 请求行请求方法、URL、协议请求头以键值对的格式携带的附加信息比如Content-Type空行分隔请求头空行之后的是发送给服务器的资源请求体发送的资源 通过chrome 开发者工具中的网络来进行查看
08_请求报文-错误排查
在保证自己测试没问题的时候使用开发者工具中的网络选项卡进行查看我们报错的信息观察后对代码进行改进这样精确定位提高效率
09_HTTP协议-响应报文
http协议规定了浏览器发送及服务器返回内容的格式。
响应报文
响应报文服务器按照http协议要求的格式返回非浏览器的内容
响应报文的组成 响应行状态行协议、http响应状态码返回给浏览器的内容响应头以键值对的格式携带的附加信息比如Content-Type空行分隔请求头空行之后的是发送给服务器的资源响应体返回的资源 响应状态码
状态码说明1xx信息2xx成功3xx重定向消息4xx客户端错误5xx服务端错误
例如;404表示服务器找不到资源
可以再网络中的响应中查看服务器相应的结果
10_接口文档
接口文档描述接口的文章
接口使用Ajax和服务器通讯时使用的URL请求方法以及参数。
重点就是在于学会看着接口文档的需求来编写代码。
11_用户登录案例
需求 点击登录时判断用户名和密码长度提交数据和服务通信响应提示消息渲染 代码示例 script// 目标1点击登录时用户名和密码长度判断并提交数据和服务器通信document.querySelector(.btn-login).addEventListener(click, () {// 1、获取用户名和密码框以及value值const username document.querySelector(.username).valueconst password document.querySelector(.password).valueconsole.log(username,password)// 2、点击登录时判断用户名和密码长度if (username.length 8 || username.length 16) {alert(用户名不合法)return} else if (password.length 6 || password.length 16) {alert(密码不合法)return} else {axios({url: http://hmajax.itheima.net/api/login,method: post,data: {username,password}}).then((result) {// 返回服务器响应的状态alert(result.data.message)}).catch((error) {// 返会服务器响应的错误信息alert(error.response.data.message) })}})/script 优化提示框后的代码 直接上代码 script// 目标1点击登录时用户名和密码长度判断并提交数据和服务器通信// 目标2使用提示框反馈提示消息/* * 提示框需求分析* 1、获取提示框标签* 2、封装一个函数用于渲染视图。* 3、设置提示文字以及对应的颜色成功为绿色失败为红色* 4、为了让提示框自动隐藏我们添加一个延迟函数*/// 1.获取提示框标签const Alert document.querySelector(.alert-success)function getAlert(message, flag) {// 3.设置提示文字以及对应的颜色Alert.innerHTML messageAlert.classList.add(show)// flag ? alert-succes : alert-danger// console.log(flag ? alert-succes : alert-danger)Alert.classList.add(flag ? alert-succes : alert-danger)// 4.声明一个延迟函数用于一定事件后隐藏提示框也就是移除类名setTimeout(() {Alert.classList.remove(show)// 提示框颜色类名重置也就是本次使用完清除Alert.classList.remove(flag ? alert-succes : alert-danger)}, 2000)}// 1.1 登录-点击事件document.querySelector(.btn-login).addEventListener(click, () {// 1.2 获取用户名和密码const username document.querySelector(.username).valueconst password document.querySelector(.password).value// console.log(username, password)// 1.3 判断长度if (username.length 8) {// 调用函数渲染当前提示信息getAlert(用户名必须大于等于8位, false)console.log(用户名必须大于等于8位)return // 阻止代码继续执行}if (password.length 6) {// 调用函数渲染当前提示信息getAlert(密码必须大于等于6位, false)console.log(密码必须大于等于6位)return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log(提交数据到服务器)axios({url: http://hmajax.itheima.net/api/login,method: POST,data: {username,password}}).then(result {// 调用提示框渲染函数然后将返回值当做实参getAlert(result.data.message,true)console.log(result)console.log(result.data.message)}).catch(error {// 调用提示框渲染函数然后将返回值当做实参getAlert(error.response.data.message,false)console.log(error)console.log(error.response.data.message)})})/script 12_form-serialize插件使用
作用
作用 快速收集表单元素的值
语法
语法 const data serialize(form,{hash: true,empty: true})
serialize函数里面的form可以获得表单中所有name属性标签的值 把插件引入到自己的网页中 2、 使用serialize函数快速收集表单元素的值 参数1、需要获取哪个表单的数据 表单元素设置 name 属性值会作为对象的属性名 建议 name 属性的值最好和接口文档参数名一致 参数2、配置对象 hash 设置获取数据结构 true js对象 推荐使用true因为将获得的对象可以提交给服务器 false 查询字符串 empty 设置是否取空值 true 获取空值推荐 false 不获取空值 目标
目标在点击提交时使用form-serialize插件快速收集表单元素值
代码示例 form actionjavascript:; classexample-forminput typetext nameusernamebrinput typetext namepasswordbrinput typebutton classbtn value提交/form!-- 引入serizlize插件 --script src../lib/form-serialize.js/scriptscript//获取按钮标签注册点击事件document.querySelector(.btn).addEventListener(click, () {const form document.querySelector(.example-form)const data serialize(form,{hash: true,empty: true}) //写这种即可哦// const data serialize(form,{hash: false ,empty: true})// const data serialize(form,{hash: false ,empty: true})console.log(data)})/script 对参数有问题可以看上面的语法 serialize案例 使用插件替代原生js 获取元素的写法。
代码演示
将serialize获取到的js对象通过 对象解构 拿到里面的值。然后直接传递给axios函数里面的提交数据给服务器 // 3.1 使用serialize插件const form document.querySelector(.form)const data serialize(form, { hash: true, empty: true })console.log(data) //{username: itheima007, password: 7654321}// 3.2 利用对象 解构 进行取值 由于属性名和属性值相同此处简写const { username, password} data// 1.2 获取用户名和密码// const username document.querySelector(.username).value// const password document.querySelector(.password).valueconsole.log(username, password)serialize函数里面的form可以获得表单中所有name属性标签的值
