建设一个打鱼游戏网站百度推广就是做网站吧

当前位置： 首页 > news >正文

建设一个打鱼游戏网站,百度推广就是做网站吧,广东省住房和城乡建设厅官方网站,商丘市做1企业网站的公司注#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