首页 > 其他分享 >Vue.js Ajax(vue-resource)

Vue.js Ajax(vue-resource)

时间:2024-07-13 08:58:32浏览次数:15  
标签:vue http 请求 get res Ajax Vue options

Vue 要实现异步加载需要使用到 vue-resource 库。

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

Get 请求

以下是一个简单的 Get 请求实例,请求地址是一个简单的 txt 文本:

实例

window.onload = function(){
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
        methods:{
            get:function(){
                //发送get请求
                this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                    document.write(res.body);    
                },function(){
                    console.log('请求失败处理');
                });
            }
        }
    });
}

如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式,第二个参数 jsonData 就是传到后端的数据。

this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
    document.write(res.body);    
},function(res){
    console.log(res.status);
});

post 请求

post 发送数据到后端,需要第三个参数 {emulateJSON:true}。

emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。

实例

window.onload = function(){
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
        methods:{
            post:function(){
                //发送 post 请求
                this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
                    document.write(res.body);    
                },function(res){
                    console.log(res.status);
                });
            }
        }
    });
}

demo_test_post.php 代码如下:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>

语法 & API

你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

vue-resource 提供了 7 种请求 API(REST 风格):

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了 jsonp 以外,另外 6 种的 API 名称是标准的 HTTP 方法。

options 参数说明:

参数类型描述
urlstring请求的目标URL
bodyObjectFormDatastring作为请求体发送的数据
headersObject作为请求头部发送的头部对象
paramsObject作为URL参数的参数对象
methodstringHTTP方法 (例如GET,POST,...)
timeoutnumber请求超时(单位:毫秒) (0表示永不超时)
beforefunction(request)在请求发送之前修改请求的回调函数
progressfunction(event)用于处理上传进度的回调函数 ProgressEvent
credentialsboolean是否需要出示用于跨站点请求的凭据
emulateHTTPboolean是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT,PATCH和DELETE请求。
emulateJSONboolean设置请求体的类型为application/x-www-form-urlencoded

通过如下属性和方法处理一个请求获取到的响应对象:

属性类型描述
urlstring响应的 URL 源
bodyObjectBlobstring响应体数据
headersHeader请求头部对象
okboolean当 HTTP 响应码为 200 到 299 之间的数值时该值为 true
statusnumberHTTP 响应码
statusTextstringHTTP 响应状态
方法类型描述
text()约定值以字符串方式返回响应体
json()约定值以格式化后的 json 对象方式返回响应体
blob()约定值以二进制 Blob 对象方式返回响应体

 

 

 

标签:vue,http,请求,get,res,Ajax,Vue,options
From: https://blog.csdn.net/lwx666sl/article/details/140223593

相关文章

  • Vue.js 实例
    导航菜单实例导航菜单创建一个简单的导航菜单:<divid="main"><!--激活的菜单样式为active类--><!--为了阻止链接在点击时跳转,我们使用了"prevent"修饰符(preventDefault的简称)。--><navv-bind:class="active"v-on:click.prevent>......
  • Vue打包文件dist放在SpringBoot项目下运行(正确实现全过程)
    项目开发中,一般我们都会使用SpringBoot+Vue进行前后端开发。在部署时,会后端启动一个服务,再启动一个nginx,nginx中配置前端打包文件dist进行项目访问。实际上,我们也可以把打包好的dist目录放在SpringBoot项目下进行部署。将dist包放入resources下配置拦截器@Configuration......
  • Vue路由传参和接参如何实现
    在Vue中,使用VueRouter进行页面路由跳转时,经常需要传递参数到目标页面(组件)并在目标页面(组件)中接收这些参数。VueRouter提供了几种方式来实现路由传参和接参,主要包括通过URL的查询参数(query)、动态路由匹配(params)以及命名路由配合params或query使用。下面将分别介绍这几种方式。......
  • 在Vue中,子组件向父组件传递数据
    在Vue中,子组件向父组件传递数据通常通过两种方式实现:事件和回调函数。这两种方式允许子组件与其父组件进行通信,传递数据或触发特定的行为。1.通过事件传递数据子组件可以通过触发自定义事件,并将数据作为事件的参数来向父组件传递数据。子组件:<template><div>......
  • idea启动vue项目一直卡死在51%,问题分析及其如何解决
    如果你的项目也一直卡在百分之几十,你可以参考下面的方法,试一试能否解决问题描述:通过在idea终端中输入命令npmrunserve启动vue项目,启动进程一直卡在51%如何解决:检查<template>标签中的html内容是否被唯一一个根标签包裹......
  • zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题
    解决过程第一次排查最开始排查的是官方文档说的https://api.onlyoffice.com/editors/troubleshooting#key解决方案。参考的是官方的https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip基于Django的Python代码。......
  • Vue2与Vue3的区别
    Vue2官方已经发布不再维护了,很多公司也开始纷纷使用vue3了。那么vue3和vue2有哪些不同呢?vue3(下面简称v3)又在vue2(下面简称v2)上做了哪些拓展与改进呢?(1)首先最大的区别是数据双向绑定的改进,v2用的是es5的数据劫持Object.definedProperty,这个会一开始就给所有的数据设置了监听,比......
  • 简易Token认证系统实现指南(Spring Boot - Vue)
    在现代Web应用中,用户认证是一个不可或缺的部分。除了传统的会话/cookie认证方式,Token认证提供了一种无状态、可扩展的认证机制。在本文中,我将向您展示如何在一个SpringBoot应用中实现一个简易的Token认证系统 什么是Token认证?Token认证是一种安全机制,通常使用JSONWebToke......
  • 适合小白学校的springboot2 vue3 图书管理系统idea开发mysql数据库
    博主介绍:专注于Java.net phpphython 小程序等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作☆☆☆精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟我的博客空间发布了1000+毕设题目方便大家学习使用感兴趣的可以先收藏起来,还有大家在......
  • 用Vue3和Plotly.js实现3D小提琴图的交互式可视化
    本文由ScriptEcho平台提供技术支持项目地址:传送门小提琴图:绘制性别账单分布应用场景小提琴图是一种数据可视化工具,用于比较不同组别的分布。它结合了箱线图和核密度估计,可以直观地展示数据的中心趋势、离散度和分布形状。小提琴图常用于比较不同性别、年龄组或其他类别......