• JavaScript-Ajax-axios-Xhr

     JS的异步请求

    主要有xhr xmlHttpRequest 以及axios  下面给出代码以及详细用法，都写在了注释里 直接拿去用即可 

    测试中默认的密码为123456 账号admin

    其他一律返回登录失败

    代码实例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <p class="my">p>
    11.  
    12.     <script>
    13.         //这里简单介绍利用xhr方式进行异步
    14.         //xhr xmlhttprequest
    15.         /*先说ajax吧，其实就是一种概念的统称，异步调用。我们熟知的XHR、axios、fetch都是在这个概念之下。
    17. 具体到后面三个，都是异步请求的实现方式。
    19. 浏览器环境中有两个和ajax有关的原生api，一个是XHR一个是Fetch，Fetch是与XHR同级且后出的异步请求方式。
    21. axios则是一个异步请求的第三方库。
    23. JQ的ajax部分和axios的实现都是源于对XHR的封装
    24. axios 的话可以自动把json数据转换成js对象 利用json.prase方法
    26. 下面的接口文档来自于黑马前端接口文档 可以拿来做测试
    27.         */
    28.         var xhr=new XMLHttpRequest();
    29.         //创建xhr对象
    30.         var url='http://ajax-api.itheima.net/api/province'
    31.         
    32.         //服务器请求地址
    33.         //这里补充一下   如果有多个参数prames  可以用插件 urlsearchprames 先把要查询的数组转换成字符串然后拼接到url 拼接方式可以用字符串模板
    34.         xhr.open('get',url,true)
    35.         //创建请求 参数：请求方式,请求地址 是否开启异步
    36.      xhr.addEventListener('loadend',()=>{
    37.         //开启监听
    38.         console.log(xhr.response)
    39.         //打印响应内容 发现这时候还是服务器的json数据  利用json的内置方法转化为js可以识别的数组 
    40.       data=JSON.parse(xhr.response)
    41.     enddata=data.data
    42.     //发现键值对为data 进行循环输出
    43.     for (let index = 0; index < enddata.length; index++) {
    44.         let element = enddata[index];      
    45.         console.log(element)     
    46.     }
    47.  
    48.    
    49.      })
    50.      xhr.send();
    51.      //发送请求
    52.  
    53.     script>
    55. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
    56. //引入axios
    57. script>
    58. <input type="text" id="m" placeholder="用户名">
    59. <input type="text" id="m1" placeholder="密码">
    60. <button type="submit" class="sub-btn">登录button>
    61. <script>
    62. //对登录进行监听   
    63. document.querySelector(".sub-btn").addEventListener(
    64.     'click',() =>{
    65.         const username =document.querySelector("#m").value
    66.     const password=document.querySelector("#m1").value
    67.     console.log(username+password)
    68.     //下面是具体写法  上面是获取用户输入的内容
    69.         axios({
    70. url:"http://ajax-api.itheima.net/api/login",
    71. method:'post',
    72. data:{
    73.     //存放交换的数据
    74. username:username,
    75. password:password
    76. }
    77.     }).then(result =>{
    78.         //成功之后返回200
    79.         console.log(result)
    80.         //打印成功的响应内容
    81.         console.log(result.data.message)
    82.         confirm(result.data.message)
    83.     }).catch(error =>{
    84.         //异常捕获  非200的
    85.         console.log(error)
    86.         //打印错误异常内容
    87.         confirm(error.response.data.message)
    88.     })
    89.  
    90.     }
    91. )
    92.    
    93.   
    94. script>
    95. body>
    96. html>

    成功截图：

     这里可以看到区别  axios自动把json数据转换了 在控制台可以看到  返回的请求头  请求方式 以及状态码  还有数据的结构

     

  • 相关阅读:
    maven3.6.3版本下载安装
    UE修改千年数据库的地址
    批量修改文件名，图文教学，2分钟简单学会
    【正点原子STM32连载】第二十一章 通用定时器实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
    【02】ZooKeeper经典应用场景实战一
    OpenDataV低代码平台增加自定义属性编辑
    设备管理的未来是什么？5 对未来的预测
    Contrastive Search Decoding——一种对比搜索解码文本生成算法
    一篇文章学会学会c3p0数据库连接池~
    MyBatis-Plus使用乐观锁具体实现
  • 原文地址：https://blog.csdn.net/m0_68711597/article/details/132922757