23-Ajax-axios

最新推荐文章于 2024-08-14 19:24:14 发布
最新推荐文章于 2024-08-14 19:24:14 发布
阅读量417 收藏 1
点赞数 1
分类专栏： 2023javaweb 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45864704/article/details/130164161
版权

一、原生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

破烂儿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
01-ajax-fetch-axios-区别.md
03-31
大厂前端面试题目|# 前端基础知识 ...- HTTP Ajax 基础知识 - Vue 等框架的基本应用 ## 注意事项 不会从 0 基础讲起，基础不熟悉可以向讲师提问 ## 看几个面试题 列几个代表性的面试题，参考视频。
ajax-axios-url-form-serialize 插件
08-19
在处理表单数据时，我们常常需要将表单数据序列化以便于发送到服务器，这就是`ajax-axios-url-form-serialize`插件的作用。 `ajax-axios-url-form-serialize`插件专为Axios设计，用于将HTML表单数据转换成URL编码...
初学axios-AJAX
lalala_dxf的博客
07-27 561
Axios是一个基于promise网络请求库，作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用XMLHttpRequests。
Ajax--Axios发送AJAX请求
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-26 353
1.Axios发送AJAX请求 1.1 请求前的准备 1.1.1 HTML页面 ajaxDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送
axios-retry 响应异常
u010281877的博客
02-08 1331
解决 ECONNABORTED 问题, 使用 axios-retry 重新请求, 解决 axios-retry 带来的拦截器多次调用问题
vue基础用法（三）----Axios基础
AimerDaniel的博客
07-29 835
一、后端项目搭建 1、创建项目 项目名称： springboot_demo5_axios 要求：mapper、service、pojo、controller 2 SpringMVC 参数传递方式 2.1)简单的参数传递 url地址：http://localhost:8090/getUserById?id=100 编辑后台Controller代码： /** * URL: http://localhost:8090/getUserById?id=100 */ @RequestMap
vue - ajax与axios的区别
weixin_42631976的博客
08-30 660
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：就是让你的每个请求都带一
Ajax-Axios
https://blog.datasource.space
04-17 2474
Ajax简单记录 1 Ajax 1.1 Ajax介绍 ​ Ajax全称为Asynchronous JavaScript And XML,就是异步的JS和XML。通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势是：懒加载，用则加载，不用不加载，也就是无刷新获取数据。 1.2 XML介绍 ​ XML即可扩展标记语言，被设计用来传输和存储数据。XML和HTML类似，不同的是HTML都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。 // 在后端开发中最常见的XML文件，就是
AJAX-axios安装
weixin_46479909的博客
12-02 414
方法1：使用cdn链接引入axios.js。
vue的axios进行ajax请求----ajax请求篇（三）
smallmww的博客
08-10 375
一、在vue框架中首先需要先安装依赖。二、在项目中的main.js中引用。三、在页面中进行使用。
JavaScript之Ajax-axios表单提交
AK Zzz的博客
11-17 5999
JavaScript的Ajax-axios表单提交,头像上传,图书管理,可能会有你想看的知识点......
Ajax-axios拦截器
weixin_46669844的博客
11-20 669
Ajax-axios拦截器常用处理
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...
Ajax-Axios的快速入门
08-27
**Ajax与Axios详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅的交互，提升了用户体验。Ajax的核心是...
Ajax-axios-endpoints.zip
09-17
Ajax-axios-endpoints.zip,axios端点帮助您使用axios创建更简洁的端点映射。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在...
Ajax-03.Axios-案例
最新发布
程小白的博客
08-14 135
【代码】Ajax-03.Axios-案例。
spark--练习1
很开心你能来~
08-07 387
sparksql练习
Ajax-02.Axios
程小白的博客
08-14 198
【代码】Ajax-02.Axios。
Ajax-01.原生方式
程小白的博客
08-12 144
【代码】Ajax-01.原生方式。
npm安装vue-axios
08-30
要安装vue-axios，您可以使用npm或yarn。在命令行中运行以下命令来安装vue-axios-interceptors： ``` npm install vue-axios-interceptors --save ``` 或 ``` yarn add vue-axios-interceptors ``` 请确保在引入vue之后导入此包。在main.js文件中引入axios并将其设置为Vue的原型属性，然后将axios传递给Vue实例中的axios选项： ``` import axios from 'axios' Vue.prototype.axios = axios; new Vue({ axios, router, store, render: h => h(App) }).$mount('#app') ``` 这样，您就可以在整个Vue应用程序中使用axios了。希望对您有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-axios-interceptors：全局捕获和处理ajax响应](https://download.csdn.net/download/weixin_42097557/14984413)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-axios的安装及四个常见方法](https://blog.csdn.net/Rich_lady/article/details/125082024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue开发实例（13）之axios和mockjs的安装与使用](https://blog.csdn.net/dkm123456/article/details/124444369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值