前端前置——ajax

生椰拿铁You2024-11-07 16:45

Day1

目标：使用axios库，获取省份列表数据，展示到页面上

axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

省份数据地址：http://hmajax.itheima.net/api/province

axios的使用

axios({

url:'目标资源地址'

}).then(result)=>{

//对服务器返回的数据做后续处理

})

url告诉axios去哪个地址进行数据交互；result回调函数

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="my-p"></p>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script>
        axios({
            url:'http://hmajax.itheima.net/api/province'
        }).then(result => {
            // console.log(result.data.list)
            //js中 join方法用于把数组中的所有元素放入一个字符串; 元素是通过指定的分隔符进行分隔的
            document.querySelector(".my-p").innerHTML = result.data.list.join('<br>')
        })
    </script>
</body>
</html>
axios --- 查询参数

语法：使用axios提供的params选项

axios({

url:'目标资源地址',

params:{

参数名：值

}

}).then(result => {

//对服务器返回的数据做后续处理

})

这里axios在运行时会把参数名和值拼接到url?参数名=值

常用请求方法

GET：获取数据

POST：提交数据

PUT：修改全部数据

DELETE：删除数据

axios请求配置

url:请求的URL网址

method:请求的方法；其中GET可省

data:提交的数据

获取数据和提交数据的区分

获取数据：

axios({

url：'目标资源地址',

method：'get',

params：{

参数名：值

}

}）

提交数据：

axios({

url：'目标资源地址',

method：'post',

data：{

参数名：值

}

}）

axios中的错误处理

场景：再次注册相同的账号，会遇到报错信息

需求：使用axios错误处理语法，拿到报错信息，弹框反馈给用户

语法：

axios({

}).then(result => {

//处理数据（成功的结果对象）

}).catch(error => {

//处理错误（失败的结果对象）

})

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">注册用户</button>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        document.querySelector('.btn').addEventListener('click',()=>{
            axios({
                url:'http://hmajax.itheima.net/api/register',
                method:'post',
                data:{
                    username:'itheima009',
                    password:'76543210'
                }
            }).then(result=>{
                // console.log(result.data.message)
                alert(result.data.message)
            }).catch(error=>{
                // console.log(error.response.data.message)
                alert(error.response.data.message)
            })
        })
    </script>
</body>
</html>
HTTP协议 --- 请求报文

组成：

通过浏览器的网络面板中查看请求报文

请求行

请求头

请求体 ------ 看请求载荷

HTTP协议 --- 响应报文

组成：

响应行

响应状态码：

1~：信息；2~：成功；3~：重定向消息；4~：客户端（浏览器）错误；5~：服务端错误

响应头

响应体 ------ 看响应

form-serialize插件

作用：快速收集表单元素的值；一步到位

引入到自己网页中：npm install form-serialize

<script src="./node_modules/form-serialize/index.js"></script>

语法：

const form = document.querySelector('.example-form')

const data = serialize(form , {hash:true,empty:true} )

传表单对象 配置对象

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="javascript:;" class="example-form">
        <input type="text" name="uname">
        <br>
        <input type="text" name="pwd">
        <br>
        <input type="button" class="btn" value="提交">
    </form>

    <script src="./node_modules/form-serialize/index.js"></script>


    <script>
        document.querySelector('.btn').addEventListener('click',()=>{
            const form = document.querySelector('.example-form')
            // 参1:获取哪个表单的数据；表单元素设置name属性，值会作为对象的属性名；属性值最好和接口文档参数名一致
            // 参2：配置对象；
            // hash 设置获取数据结构
            //   -true : js对象
            //   -false : 查询字符串 eg.uname=2345t&pwd=edfgh
            // empty 设置是否获取空值
            //   -true : 获取空值
            //   -false : 不获取空值
            const data = serialize(form,{hash:false,empty:true})
            console.log(data)
        })
    </script>
</body>
</html>

Day2

Bootstrap弹框
通过属性方式，控制弹框的显示隐藏

不离开当前页面，显示单独内容

  • 先引入bootstrap.css和bootstrap.js

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

  • 准备弹框标签
  • 控制弹框显示和隐藏

语法：

<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>

data-bs-toggle="modal"：告诉按钮点击后会出来model类型的弹框

<div class="modal form-modal" tabindex="-1">
data-bs-target=".form-modal"：一个网页可能有多个弹框，告诉按钮点击对应控制哪个弹框

<div class="modal form-modal" tabindex="-1">
<button data-bs-dismiss="modal">Close</button>

data-bs-dismiss="modal"：隐藏当前提示框

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <style>
        .btn-primary{
            display:inline;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".form-modal">
        显示弹框
    </button>

    <!-- 弹框标签 -->
    <div class="modal form-modal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>
通过js代码方式，控制弹框的显示隐藏
  • 同样的引入bootstrap.css和bootstrap.js

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

  • 创建弹框对象

const modalDom = document.querySelector('css选择器')

const modal = new bootstrap.Modal(modalDom)

  • 调用弹框对象内置方法

//显示弹框

modal.show()

//隐藏弹框

modal.hide()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-primary{
            display:inline
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary edit-btn">
        编辑姓名
    </button>

    <div class="modal name-box"  tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title">请输入姓名：</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
              <form action="">
                <span>姓名：</span>
                <input type="text" class="username">
              </form>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary save-btn">保存</button>
            </div>
          </div>
        </div>
      </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        //1.创建弹框对象
        const modalDom = document.querySelector('.name-box')
        const modal = new bootstrap.Modal(modalDom)
        // 2.编辑姓名

        document.querySelector('.edit-btn').addEventListener('click',()=>{
            //2.1显示弹框
            document.querySelector('.username').value = '默认姓名'
            modal.show()
        })

        document.querySelector('.save-btn').addEventListener('click',()=>{
            const username = document.querySelector('.username').value
            console.log('模拟把姓名保存到服务器上'+ username)
            //2.2隐藏弹框
            modal.hide()
        })

    </script>
</body>
</html>

Day3

XHR的使用

目标：使用XHR对象与服务器通信；获取省份列表数据，展示到页面上

  • 创建XHR对象

let xhr = new XMLHttpRequest()

  • 调用open方法，设置url和请求方法

xhr.open('请求方法','请求url网址')

  • 监听loadend事件，接受结果

xhr.addEventListener('loadend',() => {

//响应结果

console.log(xhr.response)

})

  • 调用send方法，发起请求

xhr.send()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://hmajax.itheima.net/api/province')
        xhr.addEventListener('loadend',()=>{
            console.log(xhr.response)
        })
        xhr.send()
    </script>
</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>
    <p class="my-p"></p>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://hmajax.itheima.net/api/province')
        xhr.addEventListener('loadend',()=>{
            // console.log(xhr.response)
            // JSON字符串转对象（不然.list获取不到）
            let data = JSON.parse(xhr.response)
            console.log(data.list.join('<br>'))
            document.querySelector('.my-p').innerHTML = data.list.join('<br>')
        })
        xhr.send()
    </script>
</body>
</html>
XHR --- 查询参数

语法：http://xxx.com/xxx/xxx?参数名1=值1\&参数名2=值2

目标：使用XHR携带查询参数，展示某个省下属的城市列表

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="city-p"></p>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://hmajax.itheima.net/api/city?pname=辽宁省')
        xhr.addEventListener('loadend',()=>{
            // console.log(xhr.response)
            let data = JSON.parse(xhr.response)
            console.log(data.list.join('<br>'))
            document.querySelector('.city-p').innerHTML = data.list.join('<br>')
        })
        xhr.send()
    </script>
</body>
</html>
XHR --- 数据提交（到服务器保存）

目标：通过XHR提交用户名和密码，完成注册功能

  • 创建XHR对象

let xhr = new XMLHttpRequest()

  • 调用open方法，设置url和请求方法

xhr.open('请求方法','请求url网址')

  • 监听loadend事件，接受结果

xhr.addEventListener('loadend',() => {

//响应结果

console.log(xhr.response)

})

  • 设置请求头（eg.设置Content-Type: application/json）

xhr.setRequestHeader('Content-Type','application/json')

准备请求体数据

  • 调用send方法，发起请求体数据

xhr.send()

相关推荐
XinZong13 分钟前
【VSCode插件推荐】想准时下班，你需要codemoss的帮助，分享AI写代码的愉快体验，附详细安装教程
前端·程序员
ErvinHowell20 分钟前
文件MD5生成性能大提升！如何实现分片与Worker优化
前端·vue.js·算法
想做白天梦36 分钟前
LeetCode :150. 逆波兰表达式求值(含求后缀表达式和中缀转后缀表达式)
java·前端·算法
迃-幵41 分钟前
力扣：225 用队列实现栈
android·javascript·leetcode
s甜甜的学习之旅1 小时前
前端js处理list(数组)
开发语言·前端·javascript
小布布的不2 小时前
MyBatis 返回 Map 或 List＜Map＞时，时间类型数据，默认为LocalDateTime，响应给前端默认含有‘T‘字符
前端·mybatis·springboot
aPurpleBerry2 小时前
Vue3+axios+Vite配置Proxy代理解决跨域
前端·javascript·vue.js
星月前端2 小时前
【vue-pdf】简单封装pdf预览组件
javascript·vue.js·pdf
JustCouvrir2 小时前
macOS｜前端工程部署到Nginx服务器
服务器·前端·nginx
代码哈士奇2 小时前
mqtt 传递和推送 温湿度计消息 js
开发语言·前端·javascript·硬件·esp8266
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）05红米手机使用google play06【经验分享】Ubuntu22.04安装微信(linux官方版)07【AIGC】重塑未来的科技巨轮08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO