Ajax的基础知识

Ajax就是异步的JavaScript和XML

Ajax的作用

  1. 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
  2. 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如搜索联想、用户名是否可用的检查等等

同步和异步:

原生Ajax(淘汰)

Ajax-Axios2

Axios入门

  1. 引入Axios的js文件
  2. 使用Axios发送请求,并获取响应结果

简化版本:

例子:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        table {
            width: 60%;
            border-spacing: 0; /* 设置表格单元格之间的间距为 0 */
        }

        th, td {
            border: 1px solid black; /* 设置单元格边框 */
            padding: 8px; /* 设置单元格内边距 */
            text-align: center; /* 文本居中 */
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>id</th>
                <th>login</th>
                <th>node_id</th>
                <th>url</th>
                <th>html_url</th>
                <th>type</th>
            </tr>
    
            <tr v-for="(user) in emps">
                <td>{{user.id}}</td>
                <td>{{user.login}}</td>
                <td>{{user.node_id}}</td>
                <td>{{user.url}}</td>
                <td>{{user.html_url}}</td>
                <td>{{user.type}}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: "#app",//vue接管区域
            data: {
                emps:[]
            },
            mounted(){
                axios.get("https://api.github.com/users").then(result =>{
                    this.emps = result.data; 
                })
            }
        });

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

效果:

使用了 Vue.js 和 Axios 来创建一个简单的页面,从 GitHub API 获取用户信息并显示在表格中。

让我解释一下代码的运行过程:

  • 在 HTML 部分,你定义了一个表格,其中有一个表头和一个用于显示员工信息的表格体。
  • 在 Vue.js 部分,你创建了一个 Vue 实例,并将其绑定到 id 为 "app" 的 DOM 元素上。
  • 在 data 属性中,你定义了一个名为 emps 的数组,用于存储从 GitHub API 获取的员工信息。
  • 在 mounted 生命周期钩子中,当 Vue 实例挂载到 DOM 上时,会执行 axios.get 方法发起 GET 请求,获取 GitHub 用户信息。
  • 当请求成功时,将结果中的数据(即 GitHub 用户信息)赋值给 emps 数组,然后 Vue 会自动将数据渲染到页面上。
相关推荐
Apifox3 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95277 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿30 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox