23-Ajax-axios

一、原生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.mfbz.cn/a/12010.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

中科大ChatGPT学术镜像小白部署教程,全民都可以拥抱AI

中科大ChatGPT学术镜像小白部署教程,全民都可以拥抱AI

docker…不会用…python不会用…服务器默认python版本3.6不会升级…代理也不会配置…各种命令不会用… 那么下面就是最简单办法&#xff0c;点点点即可【希望有帮助&#xff1f;】 文章目录一、体验镜像地址二、 基本配置2.1 config.py文件2.2 main.py文件三、下载项目四、项目…
阅读更多...
【C++】哈希表：开散列和闭散列

【C++】哈希表：开散列和闭散列

&#x1f4dd; 个人主页 &#xff1a;超人不会飞)&#x1f4d1; 本文收录专栏&#xff1a;《C的修行之路》&#x1f4ad; 如果本文对您有帮助&#xff0c;不妨点赞、收藏、关注支持博主&#xff0c;我们一起进步&#xff0c;共同成长&#xff01; 目录前言一、基于哈希表的两个…
阅读更多...
一条更新语句的执行流程又是怎样的呢？

一条更新语句的执行流程又是怎样的呢？

当一个表上有更新的时候&#xff0c;跟这个表有关的查询缓存会失效&#xff0c;所以这条语句就会把表T上所有缓存结果都清空。这也就是我们一般不建议使用查询缓存的原因。 接下来&#xff0c;分析器会通过词法和语法解析知道这是一条更新语句。优化器决定要使用ID这个索引。然…
阅读更多...
JAVA+SQL离散数学题库管理系统的设计与开发

JAVA+SQL离散数学题库管理系统的设计与开发

题库、试卷建设是教学活动的重要组成部分&#xff0c;传统手工编制的试卷经常出现内容雷同、知识点不合理以及笔误、印刷错误等情况。为了实现离散数学题库管理的信息化而开发了离散数学题库管理系统。 该系统采用C/S 模式&#xff0c;前台采用JAVA&#xff08;JBuilder2006&am…
阅读更多...
如何选择合适的网络自动化工具

如何选择合适的网络自动化工具

通过网络自动化工具实现网络自动化是所有网络组织的关键。如果没有合适的网络自动化工具&#xff0c;拥有由许多设备组成的大型网络环境的组织将无法执行重要操作&#xff0c;例如按时备份配置、实时跟踪不需要的更改以及遵守行业法规。当组织未能使用正确的网络自动化工具来执…
阅读更多...
四百左右哪款蓝牙耳机比较好？400元价位蓝牙耳机推荐

四百左右哪款蓝牙耳机比较好？400元价位蓝牙耳机推荐

除了日常通勤以及休息前听歌以外&#xff0c;随着加班变得频繁&#xff0c;工作时也戴起了耳机&#xff0c;由于市面上的耳机种类繁多&#xff0c;因此许多人不知道从而选择&#xff0c;小编发现更多的人是追求性价比&#xff0c;所以整理了一期四百左右性能表现优异的款式给大…
阅读更多...
量化择时——LSTM深度学习量化择时（第1部分—因子测算）

量化择时——LSTM深度学习量化择时（第1部分—因子测算）

之前我们尝试使用SVM&#xff0c;将时序数据转为横截面的数据&#xff0c;使用机器学习的方法进行预测 量化择时——SVM机器学习量化择时&#xff08;第1部分—因子测算&#xff09;&#xff1a; https://blog.csdn.net/weixin_35757704/article/details/129909497 但是因为股…
阅读更多...
DHCP及中继(UOS)

DHCP及中继(UOS)

DHCP服务器 中继器 客户端 服务器 安装DHCP apt install isc-dhcp-server -y 编辑配置文件 vim /etc/dhcp/dhcpd.conf 重启服务 systemctl restart isc-dhcp-server 配置监听网卡 vim /etc/default/isc-dhcp-server 中继器 安装dhcp yum install dhcp -y nmtui 修改…
阅读更多...
pytest测试报告Allure - 动态生成标题生成功能、添加用例失败截图

pytest测试报告Allure - 动态生成标题生成功能、添加用例失败截图

一、动态生成标题 默认 allure 报告上的测试用例标题不设置就是用例名称&#xff0c;其可读性不高&#xff1b;当结合 pytest.mark.parametrize 参数化完成数据驱动时&#xff0c;如标题写死&#xff0c;其可读性也不高。 那如果希望标题可以动态的生成&#xff0c;采取的方案…
阅读更多...
Hadoop 生态圈及核心组件简介Hadoop|MapRedece|Yarn

Hadoop 生态圈及核心组件简介Hadoop|MapRedece|Yarn

文章目录大数据时代HadoopHadoop概述Hadoop特性优点Hadoop国内外应用Hadoop发行版本Hadoop集群整体概述HDFS分布式文件系统传统常见的文件系统数据和元数据HDFS核心属性HDFS简介HDFS shell操作Map Reduce分而治之理解MapReduce思想分布式计算概念MapReduce介绍MapReduce产生背景…
阅读更多...
[STM32F103C8T6]DMA

[STM32F103C8T6]DMA

DMA(Direct Memory Access&#xff0c;直接存储器访问) 提供在外设与内存、存储器和存储器、外设 与外设之间的高速数据传输使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于 CPU&#xff0c;在这个时间中&#xff0c;CPU对于内存的工作来说就无法使用。 我自己…
阅读更多...
JDBC概述三（批处理+事务操作+数据库连接池）

JDBC概述三（批处理+事务操作+数据库连接池）

一&#xff08;批处理&#xff09; 1.1 批处理简介 批处理&#xff0c;简而言之就是一次性执行多条SQL语句&#xff0c;在一定程度上可以提升执行SQL语句的速率。批处理可以通过使用Java的Statement和PreparedStatement来完成&#xff0c;因为这两个语句提供了用于处理批处理…
阅读更多...
BGP策略实验

BGP策略实验

实验要求&#xff1a; 1、使用PreVa1策略&#xff0c;确保R4通过R2到达192.168.10.0/24 2、使用AS_Path策略&#xff0c;确保R4通过R3到达192.168.11.0/24 3、配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24 4、使用Local Preference策略&#xff0c;确保R1通过R2到…
阅读更多...
公司新招了个腾讯拿38K的人，让我见识到了什么才是测试天花板···

公司新招了个腾讯拿38K的人，让我见识到了什么才是测试天花板···

5年测试&#xff0c;应该是能达到资深测试的水准&#xff0c;即不仅能熟练地开发业务&#xff0c;而且还能熟悉项目开发&#xff0c;测试&#xff0c;调试和发布的流程&#xff0c;而且还应该能全面掌握数据库等方面的技能&#xff0c;如果技能再高些的话&#xff0c;甚至熟悉分…
阅读更多...
【失业即将到来？】AI时代会带来失业潮吗？

【失业即将到来？】AI时代会带来失业潮吗？

文章目录前言一、全面拥抱AIGC二、AI正在取代这类行业总结前言 兄弟姐妹们啊&#xff0c;AI时代&#xff0c;说抛弃就抛弃&#xff0c;真的要失业了。 一、全面拥抱AIGC 蓝色光标全面暂停外包&#xff1f; 一份文件截图显示&#xff0c;中国知名4A广告公司&#xff0c;蓝色光…
阅读更多...
【GPT4】微软 GPT-4 测试报告（5）与外界环境的交互能力

【GPT4】微软 GPT-4 测试报告（5）与外界环境的交互能力

欢迎关注【youcans的AGI学习笔记】原创作品 微软 GPT-4 测试报告&#xff08;1&#xff09;总体介绍 微软 GPT-4 测试报告&#xff08;2&#xff09;多模态与跨学科能力 微软 GPT-4 测试报告&#xff08;3&#xff09;编程能力 微软 GPT-4 测试报告&#xff08;4&#xff09;数…
阅读更多...
基于AI分词模型，构建一个简陋的Web应用

基于AI分词模型，构建一个简陋的Web应用

文章目录前言1. 效果展示2. 应用设计3. 实现3.1. lac分词模型的服务化部署3.2 使用Flask构建app4. 小结前言 内容纯属个人经验&#xff0c;若有不当或错误之处&#xff0c;还请见谅&#xff0c;欢迎指出。 文中大致介绍了&#xff0c;如何快捷地使用PaddleHub服务化部署一个简…
阅读更多...
九龙证券|昨夜，大涨！蔚来5.99%，小鹏15.22%，理想6.39%

九龙证券|昨夜，大涨！蔚来5.99%，小鹏15.22%，理想6.39%

当地时间周一&#xff0c;美股三大指数低开高走&#xff0c;尾盘小幅收涨。盘面上&#xff0c;银行股、航空股遍及上涨。 展望本周&#xff0c;包括美联储理事沃勒、鲍曼等官员将迎来下月会议沉默期前的最终说话&#xff0c;投资者需关注其对经济和货币政策前景的看法。此外&am…
阅读更多...
如何在TikTok视频描述中提高用户参与度

如何在TikTok视频描述中提高用户参与度

鑫优尚电子商务&#xff1a;TikTok视频描述&#xff08;包括话题标签&#xff09;有150个字符的限制&#xff0c;因此卖家需要合理撰写出有趣且有实际意义的视频描述。可尝试将描述保持在140个字符以内&#xff0c;将最重要的信息放在前面&#xff0c;并通过多次修改文案以排除…
阅读更多...
甘特图控件DHTMLX Gantt入门使用教程【引入】：dhtmlxGantt与ASP.NET Core（上）

甘特图控件DHTMLX Gantt入门使用教程【引入】：dhtmlxGantt与ASP.NET Core（上）

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求&#xff0c;具备完善的甘特图图表库&#xff0c;功能强大&#xff0c;价格便宜&#xff0c;提供丰富而灵活的JavaScript API接口&#xff0c;与各种服务器端技术&am…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发