网站建设与管理期末试卷,保定seo关键词优化外包,什么是网络营销市场营销学,不适合学编程的人#x1f49d;#x1f49d;#x1f49d;欢迎来到我的博客#xff0c;很高兴能够在这里和您见面#xff01;希望您在这里可以感受到一份轻松愉快的氛围#xff0c;不仅可以获得有趣的内容和知识#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小… 欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨ 前言
本栏目是根据黑马程序员的网课来整理的笔记也会结合我的一些个人见解来记录自己学习Ajax的过程俗话说好记性不如烂笔头小郑喜欢在学习的过程中记笔记记下自己在学习过程中难以理解的知识点反复练习加深印象小郑打算在这个暑假的第一个月学习完Ajax从0到1实现项目希望广大网友一起监督学习互相进步! 目录
什么是 AJAX ?
引入 axios.js 文件到自己的网页中
URL 查询参数
1. 查询参数的语法 2. axios 如何携带查询参数?
查询地区列表案例
axios错误处理
请求报文--错误排查
form-serialize 插件 什么是 AJAX ? 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中使用 AJAX技术XHR对象发起获取省份列表数据的请求服务器代码响应准备好的省份列表数据给前端前端拿到数据数组以后展示到网页 引入 axios.js 文件到自己的网页中 axios.js文件链接:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js axios函数的使用语法
axios({url: 目标资源地址
}).then((result) {// 对服务器返回的数据做后续处理
})
URL 查询参数 1. 查询参数的语法 在 url 网址后面用?拼接格式XXXX?参数名1值1参数名2值2 参数名一般是后端规定的值前端看情况传递即可 2. axios 如何携带查询参数?
查询城市列表的 url地址http://hmajax.itheima.net/api/city
axios({url: 目标资源地址,params: {参数名: 值}
}).then(result {// 对服务器返回的数据做后续处理
}) 查询地区列表案例
查询地区: http://hmajax.itheima.net/api/area
/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/
// 目标: 根据省份和城市名字, 查询地区列表
// 1. 查询按钮-点击事件
document.querySelector(.sel-btn).addEventListener(click, () {// 2. 获取省份和城市名字let pname document.querySelector(.province).valuelet cname document.querySelector(.city).value// 3. 基于axios请求地区列表数据axios({url: http://hmajax.itheima.net/api/area,params: {pname,cname}}).then(result {// console.log(result)// 4. 把数据转li标签插入到页面上let list result.data.listconsole.log(list)let theLi list.map(areaName li classlist-group-item${areaName}/li).join()console.log(theLi)document.querySelector(.list-group).innerHTML theLi})
})
axios错误处理 当用户已经注册过再次点击注册按钮的时候就会报错那么我们要怎么处理呢? !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title常用请求方法和数据提交/title
/headbodybutton classbtn注册用户/buttonscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*注册用户http://hmajax.itheima.net/api/register请求方法POST参数名username用户名中英文和数字组成最少8位password密码 最少6位目标点击按钮通过axios提交用户和密码完成注册*/document.querySelector(.btn).addEventListener(click, () {axios({url: http://hmajax.itheima.net/api/register,method: POST,data: {username: 大学生小郑123,password: 7654321}}).then(result {console.log(result)}).catch(error {console.log(error.response.data.message)alert(error.response.data.message)})})/script
/body/html 请求报文--错误排查 当我点击登录的时候发现密码错误那么我们要怎么排查错误呢?
流程
1.确认信息是否在请求报文正确携带
2.发现密码错误 返回到代码查看 form-serialize 插件 使用serialize函数快速收集表单元素的值 * 参数1要获取哪个表单的数据 * 表单元素设置name属性值会作为对象的属性名 * 建议name属性的值最好和接口文档参数名一致 * 参数2配置对象 * hash 设置获取数据结构 * - trueJS对象推荐一般请求体里提交给服务器 * - false: 查询字符串 * empty 设置是否获取空值 * - true: 获取空值推荐数据结构和标签结构一致 * - false不获取空值 script src./lib/form-serialize.js/scriptscriptdocument.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: true, empty: false })console.log(data)})/script ❤️❤️❤️小郑是普通学生水平如有纰漏欢迎各位大佬评论批评指正 如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢!
