前端前置——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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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()

相关推荐
旧味清欢|几秒前
关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾18 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin29 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox42 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南（十）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07RAG 实践- Ollama+RagFlow 部署本地知识库08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)