vue中的ajax

最新推荐文章于 2025-06-08 14:56:11 发布
原创 最新推荐文章于 2025-06-08 14:56:11 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#VUE

   <script>
        new Vue({
            el: '#app',
            data: {
                isShow1: true,
                isShow2: false,
                isShow3: false,
                token: "{{csrf_token()}}",
                start_time: 6,
                end_time: 22,
                notice_start_time: [
                    {
                        "indexId": 0,
                        "name": "00:00"
                    }, {
                        "indexId": 1,
                        "name": "01:00"
                    }, {
                        "indexId": 2,
                        "name": "02:00"
                    }, {
                        "indexId": 3,
                        "name": "03:00"
                    }, {
                        "indexId": 4,
                        "name": "04:00"
                    }, {
                        "indexId": 5,
                        "name": "05:00"
                    }, {
                        "indexId": 6,
                        "name": "06:00"
                    }, {
                        "indexId": 7,
                        "name": "07:00"
                    }, {
                        "indexId": 8,
                        "name": "08:00"
                    }, {
                        "indexId": 9,
                        "name": "09:00"
                    }, {
                        "indexId": 10,
                        "name": "10:00"
                    }, {
                        "indexId": 11,
                        "name": "11:00"
                    }, {
                        "indexId": 12,
                        "name": "12:00"
                    }, {
                        "indexId": 13,
                        "name": "13:00"
                    }, {
                        "indexId": 14,
                        "name": "14:00"
                    }, {
                        "indexId": 15,
                        "name": "15:00"
                    }, {
                        "indexId": 16,
                        "name": "16:00"
                    }, {
                        "indexId": 17,
                        "name": "17:00"
                    }, {
                        "indexId": 18,
                        "name": "18:00"
                    }, {
                        "indexId": 19,
                        "name": "19:00"
                    }, {
                        "indexId": 20,
                        "name": "20:00"
                    }, {
                        "indexId": 21,
                        "name": "21:00"
                    }, {
                        "indexId": 22,
                        "name": "22:00"
                    }, {
                        "indexId": 23,
                        "name": "23:00"
                    },],
                notice_end_time: [
                    {
                        "indexId": 0,
                        "name": "00:00"
                    }, {
                        "indexId": 1,
                        "name": "01:00"
                    }, {
                        "indexId": 2,
                        "name": "02:00"
                    }, {
                        "indexId": 3,
                        "name": "03:00"
                    }, {
                        "indexId": 4,
                        "name": "04:00"
                    }, {
                        "indexId": 5,
                        "name": "05:00"
                    }, {
                        "indexId": 6,
                        "name": "06:00"
                    }, {
                        "indexId": 7,
                        "name": "07:00"
                    }, {
                        "indexId": 8,
                        "name": "08:00"
                    }, {
                        "indexId": 9,
                        "name": "09:00"
                    }, {
                        "indexId": 10,
                        "name": "10:00"
                    }, {
                        "indexId": 11,
                        "name": "11:00"
                    }, {
                        "indexId": 12,
                        "name": "12:00"
                    }, {
                        "indexId": 13,
                        "name": "13:00"
                    }, {
                        "indexId": 14,
                        "name": "14:00"
                    }, {
                        "indexId": 15,
                        "name": "15:00"
                    }, {
                        "indexId": 16,
                        "name": "16:00"
                    }, {
                        "indexId": 17,
                        "name": "17:00"
                    }, {
                        "indexId": 18,
                        "name": "18:00"
                    }, {
                        "indexId": 19,
                        "name": "19:00"
                    }, {
                        "indexId": 20,
                        "name": "20:00"
                    }, {
                        "indexId": 21,
                        "name": "21:00"
                    }, {
                        "indexId": 22,
                        "name": "22:00"
                    }, {
                        "indexId": 23,
                        "name": "23:00"
                    },],
                is_send: 0,
                order_time: 30,
                order_end_time_id: 30,
                order_end_time: [
                    {
                        "indexId": 0,
                        "name": "0分钟"
                    }, {
                        "indexId": 5,
                        "name": "5分钟"
                    }, {
                        "indexId": 15,
                        "name": "15分钟"
                    }, {
                        "indexId": 30,
                        "name": "30分钟"
                    }, {
                        "indexId": 60,
                        "name": "1小时"
                    }, {
                        "indexId": 120,
                        "name": "2小时"
                    }, {
                        "indexId": 180,
                        "name": "3小时"
                    }, {
                        "indexId": 240,
                        "name": "4小时"
                    }
                ],
                message_list:[],
                page:1,
                message_statistics:[],
                message_number:0,
                page_list:[],
                totle_page:0,
                shop_name:""
            },
            created: function () {
                this.get_shop_expediting();
                //this.get_page_list();
            },
            methods: {
                toggle1: function () {
                    this.isShow1 = true
                    this.isShow2 = false
                    this.isShow3 = false
                },
                toggle2: function () {
                    this.isShow1 = false
                    this.isShow2 = true
                    this.isShow3 = false
                },
                toggle3: function () {
                    this.isShow1 = false
                    this.isShow2 = false
                    this.isShow3 = true
                },
                get_shop_expediting: function () {
                    this.$http.post('/order/get_shop_expediting', {}, {emulateJSON: true})
                        .then(function (response) {
                            //alert(response.body.message);
                            let get_data = response.body.expediting;
                            //console.log(response.body);
                            this.start_time = get_data.notice_start_time
                            this.end_time = get_data.notice_end_time
                            this.is_send = get_data.is_send
                            this.order_end_time_id = get_data.order_time
                            this.message_list =response.body.message_data
                            this.message_statistics =response.body.message_statistics
                            this.message_number =response.body.message_number
                            this.get_page_list_number(this.message_number);
                            this.shop_name=response.body.shop_info.shop_name
                            console.log(this.message_statistics);
                            console.log(response.body);
                        });

                },
                get_page_list_number:function (number) {
                    if(number <= 10 ){
                        this.page_list =[{ "page":1 }];
                    }else{
                        for(let i =1 ;i<= Math.ceil(number/10)  ;i++){
                            this.page_list[this.page_list.length]= {"page":i}
                        }
                    }
                    this.totle_page =this.page_list.length;
                    console.log( "========");
                    console.log( this.page_list);

                },
                get_page:function (page) {
                    this.$http.post('/order/index_data', {"page":page}, {emulateJSON: true})
                        .then(function (response) {
                            let get_data = response.body.message_data;
                            if(get_data.length>0 && page > this.page){
                                this.page =this.page+1 ;
                            }else{
                                this.page =this.page-1
                            }
                            this.message_list=get_data ;

                        });
                },
                //催付基本设置
                base_edit_data: function () {
                    var postdata = {
                        token: this.token,
                        notice_start_time: this.start_time,
                        notice_end_time: this.end_time,
                        is_send: this.is_send,
                        order_time: this.order_end_time_id,
                    };
                    this.$http.post('/order/expediting_base_edit', postdata, {emulateJSON: true})
                        .then(function (response) {
                            //alert(response.body.message);
                            $("#changeSetUp").hide();
                            $("#basicSetUp").show();
                        });

                },
                //短信设置
                message_edit_data: function () {
                    var postdata = {
                        _token: this.data.token,
                        message_content: null,
                        test_mobile: null,
                    };
                    this.$http.post('/order/expediting_message_edit', postdata, {emulateJSON: true})
                        .then(function (response) {

                        });
                    // $("#changeSetUp").hide();
                    //$("#basicSetUp").show();
                },
                //短信测试发送设置
                message_send: function () {
                    var postdata = {
                        _token: this.data.token,
                        message_content: null,
                        test_mobile: null,
                    };
                    this.$http.post('/order/test_send_message', postdata, {emulateJSON: true})
                        .then(function (response) {

                        });
                },
                //状态更新
                update_status_edit: function () {
                    var postdata = {
                        _token: this.data.token,
                        open_status: null, //  0 或者 1
                    };
                    this.$http.post('/order/expediting_update_status_edit', postdata, {emulateJSON: true})
                        .then(function (response) {

                        });
                }
            }
        })
    </script>

vue中Ajax(axios)及Ajax(vue-resource)的使用方法
孙叫兽的博客
12-13 2413
目录 Vue.js Ajax(axios) GET 方法 请求方法的别名 并发 请求配置项 响应结构 拦截器 取消 请求时使用 application/x-www-form-urlencoded Node.js 环境 Promises TypeScript支持 Vue.js Ajax(axios) Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。...
vue封装ajax请求
lt0213的博客
10-13 3039
vue封装ajax请求（使用axios） 在vue项目中要请求接口，可以通过使用axios来完成ajax请求。 安装方法（使用vue-cli创建的项目一般是已经安装好的，无需再次安装） 使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 或 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js">&l
Vue 发送Ajax请求多种方式
不许人间丶见白头
03-25 1033
需要注意的是，需要添加 Access-Control-Allow-Origin 在请求头。
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2286
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
Web前端基础:Vue+Ajax
最新发布
孤独又灿烂的神
06-08 1073
Vue（读音 /vjuː /, 类似于 view），是一款用于构建用户界面的渐进式的JavaScript框架（官方网站：https://cn.vuejs.org）。 1). 构建用户界面 构建用户界面是指，在Vue中，可以基于数据渲染出用户看到的界面。 那这句话什么意思呢？我们来举一个例子，比如将来服务器端返回给前端的原始数据呢，就是如下这个样子： 而上面的这些原始数据，用户是看不懂的。 而我们开发人员呢，可以使用Vue中提供的操作，将原始数据遍历、解析出来，从而渲染呈现出用户所能看懂的界面，如下所示：
vue2.0的ajax
weixin_33955681的博客
05-10 389
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource 目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据，所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述，可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装...
Vue进阶：Vue中的ajax请求
做一只猫的博客
01-25 4148
理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了。一、Vue中的ajax请求。
vue 的ajax 的代码
weixin_30433075的博客
03-06 173
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <p>{{name}}</p> </div> ...
vue ajax 拦截原理与实现方法示例
12-14
本文实例讲述了vue ajax 拦截原理与实现方法。分享给大家供大家参考，具体如下： 概要说明 在开发的过程中，我们需要通过AJAX请求，访问后台获取数据，这个获取数据的时候，当然需要后台需要时登录状态才能访问数据...
vue的ajax下载
09-06
vue的ajax下载帮助更多的人学习和使用vue。减少不必要的浪费时间的去网上寻找，这里应有尽有。老铁，这里有资源。
vue发送ajax请求详解
01-19
vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现 axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新...
Vue中的ajax
susud的博客
05-16 2389
第一步： 在项目里安装axios 指令 npm i axios 第二步引入 第三步配置调用方法 平时所说的跨域简单的理解就是违背了同源策略 前端向服务器发送请求必须三个一致：协议名一致、主机名一致、端口号一致 如：localhost:8000 === 协议名是http、主机名localhost、端口号8000 在前端向服务器发送请求，端口号不同的过程中请求是发送成功的，服务器也可以接收到消息，也成功传回了数据，但是前端页面并没有取到数据，就是因为违背同源策略。 解...
AJAX、Vue
渴鱼y. . 。.
04-02 1820
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 使用JSON格式的数据（以前用的是XML）。 优点 可以无需刷新页面就与服务器端进行通信。 允许根据用户事件来更新部分页面内容。 缺点 没有浏览
vue与Ajax
Yjh_pythonking的博客
08-29 3768
1.VUE 以前说过了vue的安装配置以及基本结构，今天来说一下它的基本操作 1.1 MVVM思想 首先要说的就是它的一个重要思想MVVM的思想 M: model 数据层 V: view 视图层 VM: 视图数据的控制层 流程: 1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化. 2. View变化, 虚拟DOM操作内存数据变化, 数据变化. 1.2 var/let/const var 没有作用域的概念 容易出现安全性问题. 成员变量 let 作用于var类似, 有作.
Vue的Ajax
xiaocheng194的博客
12-10 1228
Ajax概述: 全称是异步的js和html 同步和异步的区别? 同步:保证了数据的安全,牺牲了效率 异步:效率高,牺牲安全 特别:高效,,,局部刷新 vue框架中,提供了关于原生Ajax的优化,叫axios 开发步骤: 先导入axios.min.js文件+使用正确语法发起一个Ajax请求 语法: axios.get(url,params).then(abc>={alert(abc);}) //其中,参数,uurl必要的.params是请求参数可以省略. abc 是表示请求成功后程
VUE 中的 AJAX 请求
qq_46179813的博客
07-17 531
1、如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接； getAllList() { // 获取所有的品牌列表 // 分析： // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求 // 2. 根据接口API文档，知道，获取列表的时候，应该发起一
Vue与Ajax
m0_74350516的博客
03-21 692
本文围绕Vue与Ajax展开，介绍了发送AJAX异步请求的原生、第三方库等方式，分析了AJAX跨域问题的原因及多种解决方案。详细阐述了基于Express的服务器搭建与使用，演示了跨域问题，并给出了通过`vue.config.js`配置简单和高级代理解决跨域的方法，最后介绍了`axios`的封装。
Vue Ajax
奔腾游子
04-27 383
vue-ajax vue 项目中常用的 2 个 ajax 库 在Vue项目中前后端交互时，早期的Vue版本使用Vue-resource插件从后台获取数据。从Vue2.0之后就不再对vue-resource进行更新，而是推荐使用axios. vue-resource Vue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。vue-resource像jQuery的$.ajax，用来进行数据交互。主要用于发送ajax请求。 特点： 1.体积小，压缩后大约1
Vue 中的 Ajax
weixin_43400476的博客
11-01 159
本文主要记录在使用 Vue 脚手架时，如何使用代理解决跨越问题，以及如何进行 Ajax 请求与后端服务器进行数据交互。
vue中使用原生ajax
03-13
### 如何在 Vue 中使用原生 XMLHttpRequest 进行 Ajax 请求 在 Vue.js 应用程序中可以直接利用 `XMLHttpRequest` 对象发起 AJAX 调用来执行异步操作。下面是一个简单的例子展示怎样创建并发送 GET 请求： ```javascript new Vue({ el: '#app', data() { return { message: '' } }, mounted() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { this.message = JSON.parse(xhr.responseText).message; } }.bind(this); xhr.send(null); // 发送请求，对于 GET 方法此参数为空即可 } }) ``` 为了处理 POST 请求或者更复杂的场景比如上传文件，则需要调整上述代码中的某些部分以适应特定需求。 当涉及到表单提交特别是带有文件的数据时，应该构建一个 `FormData` 实例来容纳这些信息，并将其作为 payload 提交给服务器[^4]。 另外值得注意的是，在现代 Web 开发实践中，通常推荐采用 Fetch API 或者 Axios 库替代原始的 `XMLHttpRequest` 接口因为它们提供了更加简洁易读且功能强大的接口设计[^1]。 尽管如此，了解如何运用基础组件仍然是很有价值的知识点之一。 #### 处理响应与错误情况 除了成功回调外，还需要考虑可能出现的各种异常状况，例如网络连接失败或是服务端返回非预期的状态码等问题。因此建议加入 try-catch 结构以及相应的 error handler 来增强健壮性。 ```javascript try { ... } catch(e){ console.error('Request failed:', e); } finally{ // 清除加载状态或其他清理工作 } ``` 通过这种方式不仅可以捕获潜在的风险还能给用户提供更好的体验提示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值