JavaScript-ajax，axios

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量41 收藏
点赞数
文章标签： javascript ajax 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52709651/article/details/131264481
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
</body>
<script>//
    function getData() {
        //创建XMLHttpRequest对象，用于和服务器交换数据
        var xmlHttpRequest = new XMLHttpRequest();
        //发送异步请求
        xmlHttpRequest.open("get", "http://www.baidu.com");
        xmlHttpRequest.send();//发送请求
        //获取服务响应数据
        xmlHttpRequest.onreadystatechange = function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="../vue/axios.js"></script>
</head>
<body>
<input type="button" value="get请求" onclick="get()">
<input type="button" value="post请求" onclick="post()">
</body>
<script>
    function get() {
        axios({
            method:"get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result=>{
            console.log(result.data)
        })
    }
    function post() {
        axios({
            method:"post",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data:"id=1"
        }).then(result=>{
            console.log(result.data)
        })
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios表格</title>
<!--    <script src="../vue/axios.js"></script>-->
<!--    <script src="../vue/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>
        <tr  v-for="(item,index) in emps">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td><img v-bind:src="item.url"></td>
            <td v-if="item.gender==1">男</td>
            <td v-if="item.gender==2">女</td>
            <td>{{item.job}}</td>

            <td>{{item.entrydate}}</td>
            <td>{{item.updatetime}}</td>
        </tr>
    </table>
</div>
<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>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios表格</title>
    <script src="../vue/axios.js"></script>
    <script src="../vue/vue.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>
        <tr  v-for="(item,index) in emps">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td><img v-bind:src="item.url"></td>
            <td v-if="item.gender==1">男</td>
            <td v-if="item.gender==2">女</td>
            <td>{{item.job}}</td>

            <td>{{item.entrydate}}</td>
            <td>{{item.updatetime}}</td>
        </tr>
    </table>
</div>
<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>
</body>
</html>
麻烦放收发室，谢谢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端-JavaScript-ajax (axios、 promise、git...)
11-19
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体：请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async，await、git仓库...
Ajax--Ajax加强--axios
薛定谔的猫
11-08 99
这六个属性都是axios替我们包装的，只有data是服务器返回回来的参数。，只专注于网络数据请求。
JavaScript之Ajax-axios表单提交
AK Zzz的博客
11-17 5594
JavaScript的Ajax-axios表单提交,头像上传,图书管理,可能会有你想看的知识点......
JavaScript-Ajax-axios-Xhr
m0_68711597的博客
09-16 302
这里可以看到区别 axios自动把json数据转换了 在控制台可以看到 返回的请求头 请求方式 以及状态码 还有数据的结构。
nodeJS--axios和fetch
qq_56973906的博客
08-07 1325
简单来说：axios就是将原生AJAX进行封装，使用Promise实现的，它会生成Promise对象,方便我们进行网络请求的一种工具；使用时需要导入axios.js。封装原理代码看之前写的。
JavaWeb --- AJAX、Axios、JSON
乌云的博客
03-16 409
AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML1、Ajax = 异步 JavaScript 和XML2、Ajax是一种用于创建快速动态网页的技术3、通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新4、传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。
AJAX ------ axios (最热门的AJAX工具库)
HuoZhiyan 的博客
02-23 288
axios 发送 AJAX请求 点击GET请求 点击POST请求 点击 AJAX 创建 server.js 文件 //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); //3.创建路由规则 //requset是对请求报文的封装 //response是对相应报文的封装 app.get('/server', (request, response)=>{
Ajax----跨域请求 axios
m0_56381561的博客
08-16 348
axios。
Vue -- Ajax / axios
Skyhaohao的博客
08-16 148
Vue -- Ajax1. 概述2. 同步和异步3. 原理4. 测试（vue提供的Ajax） 1. 概述 Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作 异步访问，局部刷新 2. 同步和异步 同步：简单来说就是按照顺序一个一个来，代码从上到下顺序执行。不会出现上面代码没有执行完就执行下面代码的情况。缺点是解析速度没
vue - ajax与axios的区别
weixin_42631976的博客
08-30 643
1.axios是一种基于Promise封装的HTTP客户端，ajax是异步js和xml，是一种异步请求的技术 2.axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端； ajax技术是实现网页的局部数据刷新 3.从浏览器中创建 XMLHttpRequest 4.axios支持Promise API 5.自动转换为JSON数据 6.拦截请求和响应 7.提供了一些并发请求的接口（axios.all） 8.客户端支持防止CSRF：就是让你的每个请求都带一
Vue_Ajax请求------axios入门小案例
czj1049561601的博客
02-26 289
通过小项目演示使用vue-axios如何和后端进行通信！ vue项目中通常使用的两个ajax库！ 1：插件vue-resource(不推荐使用，常用在vue1.0) 2：axios（推荐使用！！！！！） 案例内容： 目标：根据关键字 V 在后台GitHub中进行搜索，搜索到最受欢迎的带v的仓库（肯定是vue了） 然后点击链接，就回跳转到相应的主页中! 具体：是一个异步效果，没有请求到时，显示loading状态，返回后显示相应链接 具体结构代码如下： 1：新建vue项
Ajax-v-axios.zip
09-17
Ajax-v-axios.zip,用于Vue 2.x的Axios,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
vue-axios-interceptors：全局捕获和处理ajax响应
02-01
npm install vue-axios-interceptors --save // or yarn add vue-axios-interceptors // Make sure you import this package after you've imported Vue: window . Vue = require ( 'vue' ) ; require ( 'vue-axios...
sea-axios:axios 封装
05-20
sea-axiossea-axios (v2.0.0以上) 是为了简化使用，基于 axios (v0.18.0) 封装的一套 http 工具库。功能简化一些常用请求方式的封装。提供基于全局的请求配置项。...ajaxInit 会返回一个 ajax 方法用于单
Ajax-axios-endpoints.zip
09-17
Ajax-axios-endpoints.zip,axios端点帮助您使用axios创建更简洁的端点映射。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 246
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
ajax axios
08-11
与ajax和axios不同的是，fetch是原生的JavaScript技术，不使用XMLHttpRequest对象。 总结来说，ajax是一种基于XMLHttpRequest对象的技术，axios是对ajax的封装，并使用Promise实现。fetch是原生的JavaScript技术，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻烦放收发室，谢谢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值