网站开发发布,赤壁网站建设公司,建行个人账户查询,做兼职打字员的网站什么是Ajax#xff1a;
浏览器与服务器进行数据通讯的技术#xff0c;动态数据交互 axios库地址#xff1a;
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script 如何使用呢#xff1f; 我们现有个感性的认识
scr…什么是Ajax
浏览器与服务器进行数据通讯的技术动态数据交互 axios库地址
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script 如何使用呢 我们现有个感性的认识
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptaxios({url: http://hmajax.itheima.net/api/province}).then(result {console.log(result)console.log(result.data.list)})/script获取如下 展示到页面
bodyp/pscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptaxios({url: http://hmajax.itheima.net/api/province}).then(result {const pdocument.querySelector(p)p.innerHTMLresult.data.list.join(br)})/script
/body 认识URL
URL是统一资源定位符俗称网址访问网络资源
组成 协议、域名、资源路径
http协议超文本传输协议规定服务器和浏览器之间传输数据的格式
域名标记服务器在互联网中的方位
资源路径标记资源在服务器下具体位置 URL查询参数
浏览器提供给服务器的额外信息让服务器返回浏览器想要的数据
语法
http://xxx.com/xxx/xxx?参数名1值1参数名2值2
axios-查询参数
语法 使用axios提供的params选项拿数据时的查询参数
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)})/script
axios原码在运行时把参数名自动拼接到url上 地区查询
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0, minimum-scale1.0, user-scalablenotitle~/titlelink relshortcut icon hrefhttps://www.bilibili.com/favicon.icolink relstylesheet hrefcss/初始化表.csslink relstylesheet hrefbootstrap\css\bootstrap.min.cssmeta namekeywords content... /style/*写代码时始终要考虑权重问题*/font-face {font-family: icomoon;src: url(fonts/icomoon.eot?au9n7q);src: url(fonts/icomoon.eot?au9n7q#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?au9n7q) format(truetype),url(fonts/icomoon.woff?au9n7q) format(woff),url(fonts/icomoon.svg?au9n7q#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}.center-block {display: block;margin-left: auto;margin-right: auto;width: 500px;}/style
/headbodydiv classcenter-blockform classform-horizontaldiv classform-grouplabel forinputEmail3 classcol-sm-2 control-labelProvince/labeldiv classcol-sm-10input typetext classform-control input1 idinputEmail3 placeholderProvince/div/divdiv classform-grouplabel forinputPassword3 classcol-sm-2 control-labelCity/labeldiv classcol-sm-10input typetext classform-control input2 idinputPassword3 placeholderCity/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10button classbtn btn-default typebutton查询/button/div/div/formp地区列表/pul classlist-group/ul/table/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptconst input1 document.querySelector(.input1)const input2 document.querySelector(.input2)const btn document.querySelector(.btn)btn.addEventListener(click, () {let pname input1.valuelet cname input2.valueaxios({url: http://hmajax.itheima.net/api/area,params: {pname: pname,cname: cname}}).then(result {let list result.data.listlet str list.map(item li classlist-group-item${item}/li).join()console.log(str)document.querySelector(.list-group).innerHTML str})})/script
/body/html 常用请求方法
资源的操作
get获取数据
post提交数据 method请求方法get可以省略
data提交数据
scriptaxios({url: http://hmajax.itheima.net/api/register,method:post,data: {username: qwertyu123,password: 123456}}).then(result {console.log(result)})/script axios错误处理
语法
在then后通过 . 点语法调用catch方法传入回调函数并定义形参
scriptaxios({url: http://hmajax.itheima.net/api/register,method:post,data: {username: qwertyu123,password: 123456}}).then(result {console.log(result)}).catch(error{alert(error.response.data.message)})/script 浏览器是如何把内容发送给服务器的
这与请求报文有关 HTTP协议-请求报文
http格式规定了浏览器发送及浏览器返回内容的格式
请求报文浏览器按照http协议要求的格式发送给服务器的内容 请求报文的组成
请求行请求方法如postURL协议
请求头以键值对的格式携带的附加信息如Content-Type
空格分隔请求头空行之后是发送给服务器的资源
请求体发送到资源
在浏览器中可以看到这些内容 响应报文
响应报文服务器按照http协议要求的格式返回给浏览器的内容
响应报文的组成
响应行状态行协议http响应状态码状态信息
响应头以键值对的格式携带的附加信息如Content-Type
空格分隔响应头空行之后是服务器返回的资源
响应体返回的资源 http响应状态码
用来表明请求是否成功完成
2xx :请求成功
4xx:客户端错误
404服务器找不到资源 接口
在使用AJAX与后端通讯使用的URL请求方法以及参数 登录界面案例 style/*写代码时始终要考虑权重问题*/font-face {font-family: icomoon;src: url(fonts/icomoon.eot?au9n7q);src: url(fonts/icomoon.eot?au9n7q#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?au9n7q) format(truetype),url(fonts/icomoon.woff?au9n7q) format(woff),url(fonts/icomoon.svg?au9n7q#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}.form-control {width: 400px;}.btn-block {width: 100px;}.alert {width: 400px;height: 50px;opacity: 0;}/style
/headbodydiv classcontainerform classform-signinh2 classform-signin-headingPlease sign in/h2div classalert rolealert.../divlabel forinput classsr-onlyUsername/labelinput typetext idinput classform-control username placeholderUsername required autofocuslabel forinputPassword classsr-onlyPassword/labelinput typepassword idinputPassword classform-control password placeholderPassword requireddiv classcheckboxlabelinput typecheckbox valueremember-me Remember me/label/divbutton classbtn btn-lg btn-primary btn-block typebuttonSign in/button/form/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptconst btn document.querySelector(.btn)const username document.querySelector(.username)const password document.querySelector(.password)const Alert document.querySelector(.alert)function MyAlert() {Alert.style.opacity 1if (username.value.length 8 || password.value.length 6) {Alert.classList.remove(alert-success)Alert.classList.add(alert-danger)Alert.innerHTML 错误}else {Alert.classList.remove(alert-danger)Alert.classList.add(alert-success)Alert.innerHTML 登录成功}return false}btn.addEventListener(click, function () {let flag MyAlert()setTimeout(() {Alert.style.opacity 0}, 2000)if (!flag){return}axios({url: http://hmajax.itheima.net/api/login,method: post,data: {username: username.value,password: password.value}}).then(result {console.log(result)}).catch(error {})})/script/body form-serialize.js
可以快速获取表单元素通过解构对象获得用户信息
