JavaWeb 课堂笔记 —— 04 Ajax

本系列为笔者学习JavaWeb的课堂笔记,视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程,实现javaweb企业开发全流程(涵盖Spring+MyBatis+SpringMVC+SpringBoot等)》,章节分布参考视频教程,为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 Ajax ?

Asynchronous JavaScript And XML为异步的JavaScriptXML

作用:

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

同步与异步

02 原生 Ajax

  • 准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
  • 创建XMLHttpRequest对象:用于和服务器交换数据
  • 向服务器发送请求
  • 获取服务器响应数据

03 Axios

04 案例:基于 Vue 及 Axios 完成数据的动态加载显示

html 复制代码
<!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>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps"> ⭐
                <td>{{index + 1}}</td> 
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[] ⭐
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>
相关推荐
##echo1 小时前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
我爱学嵌入式4 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
使二颗心免于哀伤13 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意14 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
岩中竹15 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
Olrookie15 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql
rannn_11116 小时前
Java学习|黑马笔记|Day23】网络编程、反射、动态代理
java·笔记·后端·学习
UQWRJ16 小时前
菜鸟教程 R语言基础运算 注释 和数据类型
笔记