新乡住房与城乡建设厅网站,沈阳网站制作 600元,做弹幕网站有哪些,域名评估价格平台AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件
1.AJAX入门与体验axios 定义#xff1a;浏览器与服务器进行数据通信的技术 体验axios库#xff0c;与服务器通信 引入axios.js使用axios函数 p classmy-p/p浏览器与服务器进行数据通信的技术 体验axios库与服务器通信 引入axios.js使用axios函数 p classmy-p/p!-- 1.引入axios库 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 2.使用axios函数axios({url: http://ajax-api.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)})2.认识URL URL定义统一资源定位符简称网址因特网上标准的资源的地址 URL组成协议://域名/资源路径 协议规定浏览器与服务器之间传输数据的格式域名标记服务器在互联网的方位资源路径标记资源在服务器下的具体路径 URL查询参数 浏览器提供给服务器额外的信息让服务器返回浏览器想要的数据 语法http://xxxx.com/xxx/xxx?参数名1值1参数名2值2 使用params选项axios在运行时会把参数名和值拼接到url?参数名值 !-- 1.引入axios库 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 2.使用axios函数axios({url: http://hmajax.itheima.net/api/city,params: {pname: 陕西省}}).then(result {document.querySelector(.my-p).innerHTML result.data.list.join(br)})案例地区查询通过多个参数查询 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title04.案例_地区查询/titlelink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.cssstyle:root {font-size: 15px;}body {padding-top: 15px;}/style
/headbodydiv classcontainerform ideditForm classrow!-- 输入省份名字 --div classmb-3 collabel classform-label省份名字/labelinput typetext value北京 nameprovince classform-control province placeholder请输入省份名称 //div!-- 输入城市名字 --div classmb-3 collabel classform-label城市名字/labelinput typetext value北京市 namecity classform-control city placeholder请输入城市名称 //div/formbutton typebutton classbtn btn-primary sel-btn查询/buttonbrbrp地区列表: /pul classlist-group!-- 示例地区 --li classlist-group-item东城区/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*获取地区列表: 查询参数:pname: 省份或直辖市名字cname: 城市名字*/const button document.querySelector(button)button.addEventListener(click, function () {const list document.querySelector(.list-group)const province document.querySelector([nameprovince]).valueconst city document.querySelector([namecity]).valueaxios({url: http://hmajax.itheima.net/api/area,params: {pname: province,cname: city}}).then(result {// list.removeChild(document.querySelectorAll(.list-group-item))console.log(result)const lists result.data.list.map(function (item) {return li classlist-group-item${item}/li}).join()list.innerHTML lists})})/script
/body/html3.常用请求方法 Get获取数据(默认) POST提交数据 document.querySelector(.btn).addEventListener(click, () {axios({url: http://hmajax.itheima.net/api/register,method: post,data: {username: xxg213421,password: 1233432}}).then(result {console.log(result)})})PUT修改数据 DELETE删除数据 PATCH修改数据部分 axios请求配置 url请求的URL网址method请求的方法GET可以省略data提交的数据
4.axios错误处理 在then方法后面通过点语法调用catch方法传入回调函数并定义形参 document.querySelector(.btn).addEventListener(click, () {axios({url: http://hmajax.itheima.net/api/register,method: post,data: {username: xxg213421,password: 1233432}}).then(result {console.log(result)}).catch(error { //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})5.HTTP协议 HTTP协议规定了浏览器发送及服务器返回内容的格式 请求报文浏览器按照HTTP协议要求的格式发送给服务器的内容 组成部分4个 请求行请求方法URL协议请求头以键值对的格式携带的附加信息eg:Content-Type空行分隔请求头与请求体请求体发送的资源 怎么在浏览器中查看右键检查——网络——Fetch/XHR——选择某次想要看的信息进行查看 通过请求报文进行错误排查——去看报文中的载荷以及响应结果 响应报文服务器按照HTTP协议要求的格式返回给浏览器的格式 组成部分4个 响应行协议HTTP响应状态码状态信息响应头以键值对的格式携带的附加信息eg:Content-Type空行分隔响应头和响应体响应体返回的资源 HTTP响应状态码 状态码说明1XX信息2XX成功3XX重定向消息4XX客户端错误浏览器5XX服务器错误
6.接口文档 定义后端提供的描述接口的文档接口就是使用AJAX和服务器通讯时使用的URL请求方法以及参数 登录注册案例(注意这里的服务器及接口是别人的可以自己写) 注册这里的注册没有使用输入框数据,直接通过代码发送的 script/*注册用户: 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: lyq20040110,password: 20040110}}).then(result {console.log(result)}).catch(error { //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})/script登录和前面注册用的服务器是同一个所以上面注册的信息可以登陆成功 headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title12.案例_登录_提示消息/title!-- 引入bootstrap.css --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/css/bootstrap.min.css!-- 公共 --stylehtml,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}/style!-- 表单容器和内容 --style.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}/style!-- 提示框样式 --style.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}/style
/headbodydiv classcontainerh3欢迎-登录/h3!-- 登录结果-提示框 --div classalert alert-success rolealert提示消息/div!-- 表单 --div classform_wrapformdiv classmb-3label forusername classform-label账号名/labelinput typetext classform-control username/divdiv classmb-3label forpassword classform-label密码/labelinput typepassword classform-control password/divbutton typebutton classbtn btn-primary btn-login 登 录 /button/form/div/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 目标1点击登录时用户名和密码长度判断并提交数据和服务器通信// 目标2使用提示框反馈提示消息//获取提示框//功能//1.显示提示框//2.不同提示文字成功绿色不成功红色//3.两秒后自动消失const myAlert document.querySelector(.alert)function alertFn(isSuccess, msg) {myAlert.classList.add(show)myAlert.innerHTML msgconst bgStyle isSuccess ? alert-success : alert-dangermyAlert.classList.add(bgStyle)setTimeout(() {myAlert.classList.remove(show)//重置背景色myAlert.classList.remove(bgStyle)}, 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) {console.log(用户名必须大于等于8位)alertFn(false, 用户名必须大于等于8位)return // 阻止代码继续执行}if (password.length 6) {console.log(密码必须大于等于6位)alertFn(false, 密码必须大于等于6位)return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log(提交数据到服务器)axios({url: http://hmajax.itheima.net/api/login,method: POST,data: {username,password}}).then(result {console.log(result)console.log(result.data.message)alertFn(true, 登陆成功)}).catch(error {console.log(error)console.log(error.response.data.message)alertFn(false, 用户名或密码不正确)})})/script
/body
/html7.form-serialize插件
作用快速收集表单元素的值
bodyform actionjavascript:; classexample-forminput typetext nameunamebrinput typetext namepwdbrinput typebutton classbtn value提交/form!-- 目标在点击提交时使用form-serialize插件快速收集表单元素值--!-- 引入插件 --script src./form-serialize.js/scriptscriptdocument.querySelector(.btn).addEventListener(click, () {// 使用serialize函数const form document.querySelector(.example-form)//参数1获取哪个表单参数 //**表单属性要设置name值值会作为对象的属性名//**建议name属性的值和接口文档参数名一致 //参数2配置对象//**hash:设置获取的数据结构——推荐为true//****true:JS对象//****false:查询字符串——推荐为true//**empty:是否获取空值const data serialize(form, { hash: true, empty: true })console.log(data)})/script
/body
/html
