23-Ajax-axios

news2024/9/24 21:23:15

一、原生Ajax

image-20230414220216576

image-20230414220238724

<!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>Document</title>
</head>
<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>
<script>
    //Ajax 的核心是 XMLHttpRequest 对象。
    // 1、创建XMLHttpRequest对象
    var xmlhttprequest = new XMLHttpRequest();
    // 2、发送异步请求
    xmlhttprequest.open("GET","http://yapi.smart-xwork.cn/mock/169327/emp/list");
    xmlhttprequest.send();
    // 3、获取服务器响应数据
    xmlhttprequest.onreadystatechange = function () {
        if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
            document.getElementById("div1").innerHTML = xmlhttprequest.responseText;
        }
      }
</script>
</html>

image-20230414220452638

image-20230414224338655

二、Axios

image-20230414224750589

<!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>Document</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <input type="button" value="get" onclick="getMethod()">
    <input type="button" value="post" onclick="postMethod()">
</body>
<script>
    function getMethod() {
/*         axios({
        method:"get",
        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
    }).then((result)=>{//成功回调函数
        console.log(result.data);
    }) */
    // 更加简便的方法：
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
        console.log(result.data);
    })
    }
    function postMethod(){
/*         axios({
            method:"post",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data:"id=1"
        }).then((result)=>{
            console.log(result.data);
        }) */
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result)=>{
            console.log(result.data);
        })
    }
</script>
</html>

image-20230414231154562

image-20230414231220171

三、Axios案例

image-20230414231258320

<!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>axios案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        #app{
            max-width: 1680px;
            width:80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" style="margin: auto;">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            <tr v-for="(user,index) in userall">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <!-- 这里比较容易出错，图片必须用img标签渲染，然后src要用vue-bind:src或者:src -->
                <td><img v-bind:src="user.image" width="100px"></td>
                <td v-if="user.gender==1">男</td>
                <td v-if="user.gender==2">女</td>
                <td>{{user.job}}</td>
                <td>{{user.entrydate}}</td>
                <td>{{user.updatetime}}</td>
            </tr>

        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            userall:[]
        },
        methods:{

        },
        mounted(){
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
                this.userall=result.data.data;
            });
        }
    })
</script>
</html>

image-20230414235131885

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/430774.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用canvas画曲线图

用canvas画曲线图

1.创建 canvas 绘图上下文&#xff08;指定 canvasId&#xff09; 定义&#xff1a;在自定义组件下&#xff0c;第二个参数传入组件实例this&#xff0c;以操作组件内 canvas 组件。需要指定 canvasId&#xff0c;该绘图上下文只作用于对应的 canvas。 参数 参数类型说明can…
阅读更多...
jQWidgets V15.0[2023-03-03] Crack

jQWidgets V15.0[2023-03-03] Crack

高级 JavaScript 和 HTML5 用户界面框架 jQWidgets 为构建专业网站和移动应用程序提供了全面的解决方案。它完全基于 HTML5、CSS 和 JavaScript 等开放标准和技术构建。jQWidgets 支持响应式 Web 开发&#xff0c;并帮助您创建在台式机、平板电脑和智能手机上看起来很漂亮的应…
阅读更多...
Jenkins构建结果自定义内容推送企业微信

Jenkins构建结果自定义内容推送企业微信

环境&#xff1a;gitlab、jenkins(2.400,windows环境下&#xff09;、企业微信 功能&#xff1a;推送构建人、构建时长、构建结果、git提交信息到企业微信并相应提交人 一、企业微信添加群聊机器人 在弹出的页面添加一个新的机器人&#xff0c;创建完成后会有一个webhook地址…
阅读更多...
Django DRF - 认证Authentication

Django DRF - 认证Authentication

1.概念 身份验证是将传入请求与一组标识凭据&#xff08;例如&#xff0c;请求来自的用户或与其进行签名的令牌&#xff09;相关联的机制。然后&#xff0c;权限和限制策略可以使用这些凭据来确定是否应允许该请求。 身份验证本身不会允许或不允许传入的请求&#xff0c;它只…
阅读更多...
最好用的中文分词库cppjieba_ok【可直接编译使用用版】

最好用的中文分词库cppjieba_ok【可直接编译使用用版】

最好用的中文分词库cppjieba_ok【可直接编译使用用版】 中文分词技术在自然语言处理领域中扮演着非常重要的角色&#xff0c;其中cppjieba是一个高效、开源的中文分词库&#xff0c;它提供了多种分词算法和分词模式&#xff0c;并且能够支持多线程&#xff0c;能够大大提升分词…
阅读更多...
计算机组成原理——第五章中央处理器（中）

计算机组成原理——第五章中央处理器（中）

辞别再无相见月&#xff0c;终是一人度春秋 文章目录前言5.4.1 硬布线控制器的设计5.4.2 微程序控制器的基本原理5.4.3 微指令的设计5.4.4 微程序控制单元的设计前言 本文主要写的是控制器的设计&#xff0c;控制器的设计分为硬部件控制器(就是用纯硬件的方式来实现的一种控制…
阅读更多...
Asp net core写法

Asp net core写法

变量和字符串赋值 $"{变量}字符串" 列如 $"{a}你好" 全球唯一标识符 Guid.NewGuid() 线程 Task Map Dictionary<string,object> using 定义对象的使用范围&#xff0c;即使释放对象 using(Student student new Student() ) { } 异步编程&#x…
阅读更多...
博客友链效果

博客友链效果

学习风宇blog flex布局使用百分比作2栏网格布局&#xff0c;内部也是使用flex布局做左图右文使用IntersectionObserver这个浏览器提供的Api&#xff0c;配合vue指令&#xff0c;当元素出现在可视区时&#xff0c;添加上移的动画效果。注意&#xff1a;元素的初始状态&#xff…
阅读更多...
Clion 创建的Qt程序界面是老式风格

Clion 创建的Qt程序界面是老式风格

环境&#xff1a; Clion版本&#xff1a;CLion 2023.1.1Qt 5.15.2 问题 当使用Clion创建Qt程序&#xff0c;不管是选择MinGW编译器还是MSVC编译器&#xff0c;显示出来的界面都很old style 即老式的界面风格&#xff0c;如图所示&#xff1a; 原因 产生这个问题的原因是…
阅读更多...
现在培训IT技术出来还能就业吗？

现在培训IT技术出来还能就业吗？

受疫情影响&#xff0c;近三年各行业都是在裁员节流&#xff0c;直接倒闭的也是常态。互联网企业也不能幸免于难&#xff0c;被裁掉了一大波基础或中级技术岗位&#xff0c;还有一部分中高层领导降薪。然后就到处疯传IT行业不行了&#xff0c;大家都失业了&#xff0c;但你知道…
阅读更多...
算法训练第五十六天 | 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结篇

算法训练第五十六天 | 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结篇

这里写自定义目录标题583. 两个字符串的删除操作题目描述思路动态规划一动态规划二72. 编辑距离&#xff08;困难&#xff09;题目描述思路编辑距离总结篇583. 两个字符串的删除操作 题目链接&#xff1a;583. 两个字符串的删除操作 参考&#xff1a;https://programmercarl.c…
阅读更多...
clickhouse跳表索引最佳实践--minmax索引+Set索引

clickhouse跳表索引最佳实践--minmax索引+Set索引

背景 我们知道对于clickhouse这种列式存储数据库来说&#xff0c;它虽然也提供了与mysql的btree的二级索引类似的跳表索引的功能&#xff0c;但是其实跳表索引和btree的二级索引有根本上的不同&#xff0c;比如mysql的二级索引一般来说应用于高基数的列的效果是最佳的&#xf…
阅读更多...
SpringMVC入门以及工作流程详解

SpringMVC入门以及工作流程详解

什么是MVC MVC是一种分层方法&#xff0c;其三层分别是模型&#xff08;Model&#xff09;&#xff0c;视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff09;。是一种软件设计规范。MVC可以将软件的逻辑、数据和业务相分离&#xff0c;其主要作用是消除…
阅读更多...
SpringCloud-Alibaba学习笔记03——nacos管理界面详细介绍和注册中心配置详解

SpringCloud-Alibaba学习笔记03——nacos管理界面详细介绍和注册中心配置详解

一、nacos管理界面详细介绍 nacos服务管理界面如图所示&#xff1a; 1、创建服务和隐藏空服务 我们可以看到在界面上有个隐藏空服务的按钮&#xff0c;我们打开该按钮之后&#xff0c;服务列表并没有发生变化&#xff0c;这个按钮有啥用呢&#xff1f; 该按钮的作用就是隐藏…
阅读更多...
St link V2驱动安装方法

St link V2驱动安装方法

前言 st-link v2又便宜又好用&#xff0c;是ARM单片机开发的必备神器。本文面向初学者介绍如何给windows安装stlink 驱动&#xff0c;并在keil v5进行配置。 操作系统&#xff1a;windows11&#xff0c; Keil版本&#xff1a;keil v5 mdk5.37. st-link驱动云盘共享地址&#x…
阅读更多...
OSS下载中文名编码错误

OSS下载中文名编码错误

最近工作中有个需求&#xff0c;是将客户支付的银行回执单上按照客户姓名上传到oss&#xff0c;然后将oss地址反显到pc后台&#xff0c;供客户自己查看下载。 开始的时候感觉很简单&#xff0c;设计思路是根据客户支付单单号&#xff0c;查询数据库中是否存在该支付单的回执单&…
阅读更多...
Java生成二维码之Graphics2D自定义码眼形状

Java生成二维码之Graphics2D自定义码眼形状

Java 2D API 提供了几个类来定义常见的几何对象&#xff0c;例如点、直线、曲线和矩形。这些几何类是 java.awt.geom包的一部分。通过熟练使用Graphics2D类&#xff0c;可以绘制出任意类型的图形。 官网教程地址&#xff1a;https://docs.oracle.com/javase/tutorial/2d/geome…
阅读更多...
【虹科案例】固态量子发射器——虹科数字化仪用于控制钻石色心中的脉冲序列

【虹科案例】固态量子发射器——虹科数字化仪用于控制钻石色心中的脉冲序列

前言 钻石的色心是晶格中的缺陷&#xff0c;其中碳原子被不同种类的原子取代&#xff0c;相邻的晶格位置是空的。由于其明亮的单光子发射和光学可访问的自旋&#xff0c;色心可以成为未来量子信息处理和量子网络的有前途的固态量子发射器。 实现自旋量子比特和相干光子纠缠的两…
阅读更多...
基于RK3568的Linux驱动开发—— GPIO知识点（二）

基于RK3568的Linux驱动开发—— GPIO知识点（二）

authordaisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主系列基于RK3568的Linux驱动开发——GPIO知识点&#xff08;一&#xff09;_daisy.skye的博客-CSDN博客 查看goio使用情况 cat /sys/kernel/debug/gpio 1|rk3568_r:# cat /sys/kernel/debug/gpio gpiochip0: GPIOs 0-3…
阅读更多...
English Learning - L2-14 英音地道语音语调 重音技巧 2023.04.10 周一

English Learning - L2-14 英音地道语音语调 重音技巧 2023.04.10 周一

English Learning - L2-14 英音地道语音语调 重音技巧 2023.04.10 周一课前热身重音日常表达节奏单词全部重读的句子间隔时间非重读单词代词和缩约词助动词声临其境语调预习课前热身 学习目标 重音 重弱突出&#xff0c;重音突出核心表达的意思 重音是落在重读单词上&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023