门户网站建设专业,简述四个网络营销推广策略,网络搭建学什么,网页与网站设计 什么是属性注#xff1a;文件布局#xff1a;
一、AJAX的概念#xff1a;
AJAX是浏览器与服务器进行数据通信的技术 把数据变活
二、AJAX的使用#xff1a; 使用axios库#xff0c;与服务器进行数据通信 基于XMLHttpRequest封装#xff0c;代码简单 Vue,React项目使用 学习…注文件布局
一、AJAX的概念
AJAX是浏览器与服务器进行数据通信的技术 把数据变活
二、AJAX的使用 使用axios库与服务器进行数据通信 基于XMLHttpRequest封装代码简单 Vue,React项目使用 学习XMLHttpRequest对象了解AJAX底层原理
1.axios库的初步使用 引入JShttps://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js 或 https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js script srchttps://cdn.jsdelivr.net/npm/axios1.7.2/dist/axios.min.js/script 使用axios函数axios全攻略 | 羸弱的小金鱼 (ykloveyxk.github.io) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript srchttps://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js/scriptscriptaxios({url:目标资源地址}).then((result){//对服务器返回的数据做后续处理})/script
/body
/html 目标资源http://hmajax.itheima.net/api/province省份列表数据
2.使用URL进行参数查询
URL后加 ?pname河北省
语法http://xxx.com/xxx/xxx?参数名1值1参数名2值2
axios({url: http://hmajax.itheima.net/api/area,params: {pname: ${query1.value},// 参数1cname: ${query2.value} // 参数2}}).then((result) {console.log(result.data.list);ul.innerHTML result.data.list.map((x) li${x}/li).join()console.log(result.data.list.map((x) li${x}/li));})
3.常用的请求方法与数据提交
概念对服务器资源要执行的操作
请求方法操作GET(get)获取数据POST(post)提交数据PUT(put)修改数据全部DELETE(delete)删除数据PATCH(patch)修改数据部分
axios的请求配置
url 请求的URL网址
method 请求的方法GET可以省略不区分大小写
params查询参数
data提交的数据
//获取数据
axios({url: 目标资源地址,//method: get,params:{参数名:值}}).then((result) {//对返回的数据的处理})//提交数据
axios({url: 目标资源地址,method: post,data: {参数名: 值}}).then((result) {//对返回的数据的处理})
4.axios的错误处理 服务器返回的信息Uncaught大对象里的data
语法格式 axios({//请求项}).then(result{//处理数据}).catch(error{//处理错误})
三、HTTP协议
1.请求报文
HTTP协议规定了浏览器发送及服务器返回内容的格式
请求报文浏览器按照HTTP协议要求的格式发送给服务器的内容
请求报文样例 组成部分 请求行请求方法URL协议 请求头以键值对格式携带的附加信息例如Content-Type本次浏览器携带的内容类型 空行分割请求头和内容数据空行后是内容数据发给服务器的资源 请求体发送的资源 查看请求报文 2.用请求报文排查错误
传不了图片都是临时的清理掉了大家看这篇3 在浏览器中查看请求报文和响应报文_f12看请求和响应怎么看-CSDN博客 查看提交的信息判断错误位置 3.响应报文
HTTP协议规定了浏览器发送及服务器返回内容的格式
响应报文服务器按照HTTP协议要求的格式发送给浏览器的内容 响应行状态行协议HTTP响应状态码400表示响应失败、状态信息 响应头以键值对的格式携带的附加信息如Conttent-Type 空行分割响应头 响应体返回的资源
查看响应报文 HTTP状态码用来表明请求是否成功
状态码说明1xx信息2xx成功3xx重新定向消息4xx客户端错误5xx服务端错误
常见状态码
200成功
404服务器找不到资源
四、接口文档
接口文档描述接口的文章
接口使用AJAX和服务器通讯是使用的URL请求方法及参数
AJAXS接口欢迎使用 - AJAX阶段 (apifox.com)
五、from-serialize插件的使用
作用快速地搜集表单元素的值
引入插件form-serialize.js插件下载引用-CSDN博客
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css
/head
bodyform actionjavascript classexampleinput typetext nameuninput typepassword namepw!-- input typebutton classbtn value提交 --/formbutton classbtn提交/buttonscript srchttps://cdn.jsdelivr.net/npm/axios1.7.2/dist/axios.min.js/scriptscript src../from-serialize/from-serialize.js/scriptscriptconst input document.querySelector(.example)const btn document.querySelector(.btn)btn.addEventListener(click, () {let data serialize(input, { hash: true, empty: true })console.log(data);})/script
/body
/html
必须使用
form actionjavascript classexampleinput typetext nameuninput typepassword namepw!-- input typebutton classbtn value提交 --/form
的格式
form用来确定区间
name是键名
value是值
其中hash 设置获取的数据结构 true获取得到JS对象 false获取得到查询字符串
empty 设置是否获取空值 true允许获取空值 falsebu获取空值
六、案例-整合登入
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href../bootstrap-5.3.0-alpha1-dist/css/bootstrap.rtl.min.cssstyle.banner {width: 700px;height: 700px;margin: 20px auto;}
.row {margin-bottom: 15px;}
.alert {transition: all .5s;}
.unshow {opacity: 0;}/style
/head
bodydiv classbannerh1欢迎-登入/h1div classalert unshow rolealert/divform classlogin-formdiv classrow g-3 align-items-centerdiv classcol-autolabel forusername classcol-form-label用户名/label/divdiv classcol-autoinput typetext idusername nameusername classform-controlaria-describedbypasswordHelpInline/div/divdiv classrow g-3 align-items-centerdiv classcol-autolabel forpassword classcol-form-label密码/label/divdiv classcol-autoinput typepassword idpassword namepassword classform-controlaria-describedbypasswordHelpInline/divdiv classcol-autospan idpasswordHelpInline classform-textMust be 6-20 characters long./span/div/div/formbutton classbtn btn-primary登入/button/divscript srchttps://cdn.jsdelivr.net/npm/axios1.7.2/dist/axios.min.js/scriptscript src../from-serialize/from-serialize.js/scriptscript// const un document.querySelector(#username)// const pw document.querySelector(#password)const input document.querySelector(.login-form)const btn document.querySelector(button)const alt document.querySelector(.alert)
function alertFn(msg, isSuccess) {alt.classList.remove(unshow)let bgStyle isSuccess ? alert-success : alert-dangeralt.classList.add(bgStyle)alt.innerText msg// alert(用户名或密码错误)
setTimeout(function () {alt.classList.add(unshow)alt.classList.remove(bgStyle)}, 2000)}
btn.addEventListener(click, () {let data serialize(input, { hash: true, empty: true })console.log(data);if (data.username.length 8) {alertFn(用户名长度不能少于8位, 0)
return //阻止代码继续执行}else if (data.password.length 6) {alertFn(密码长度不能少于6位, 0)
return //阻止代码继续执行}axios({url: https://hmajax.itheima.net/api/login,method: post,data: {username: data.username,password: data.password}}).then(result {console.log(result);
alertFn(result.data.message, 1)
}).catch(error {console.log(error);
alertFn(error.response.data.message, 0)})})/script
/body
/html
效果
1.初始界面 2.直接登入时或用户名长度少于8位时直接点提交 3.无密码时或密码少于6位时用户名为 : itheima007 4.登入失败时 5.成功登入用户名itheima007 密码7654321
