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>
相关推荐
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
巴伦是只猫5 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
X_StarX11 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS11 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
巴伦是只猫11 小时前
【机器学习笔记 Ⅱ】1 神经网络
笔记·神经网络·机器学习
weixin_4373982111 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
teeeeeeemo12 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
致***锌16 小时前
期权标准化合约是什么?
笔记
Wilber的技术分享17 小时前
【机器学习实战笔记 14】集成学习:XGBoost算法(一) 原理简介与快速应用
人工智能·笔记·算法·随机森林·机器学习·集成学习·xgboost
The_cute_cat17 小时前
Ajax和Axios的初步学习
前端·学习·ajax