Ajax前端

最新推荐文章于 2024-11-03 23:16:52 发布

YBN娜

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量282

点赞数 3

分类专栏：前端文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_47296476/article/details/134274369

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Ajax定义：

使用浏览器的 XMLHttpRequest 对象与服务器通信
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

2.axios 语法：

1.引入axios库：


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

2.使用axios函数：

axios({
  url:'目标资源地址'

}).then((result) => {

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

})

对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX概念和axios使用</title>
</head>

<body>
<!--
  axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
  省份数据地址：http://hmajax.itheima.net/api/province

  目标: 使用axios库, 获取省份列表数据, 展示到页面上
  1. 引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 2. 使用axios函数
    axios({
        url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
        console.log(result)
        // 好习惯：多打印，确认属性名
        console.log(result.data.list)
        console.log(result.data.list.join('<br>'))
        // 把准备好省份列表，插入到页面
        document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
    })
</script>
</body>

</html>

2.URL：

2.1认识URL：

2.1.1URL：统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）

2.1.2 URL的组成：协议，域名，资源路径

2.1.2.1协议：

又叫超文本传输协议，规定了浏览器和服务器传递数据的格式：

2.1.2.2域名：

标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以

2.1.2.3资源路径：

一个服务器内有多个资源，用于标识你要访问的资源具体的位置：

2.2 URL 查询参数:(通过URL传递查询参数，获取匹配的数据 )

2.2.1查询参数 :

携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

2.2.2查询参数的语法 :

在 url 网址后面用?拼接格式：http://XXXX.COM/XXX/XXX?参数名1=值1&参数名2=值2
参数名一般是后端规定的，值前端看情况传递即可

2.2.3axios 使用 params 选项携带查询参数语法 :

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

YBN娜

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录