vue使用ajax

阳光穿透心脏的1/2处 2021-12-08 17:51 259阅读 0赞

1.Vue的Ajax基本用法

在vue中用Ajax需要用到vue.js和vue-resource.js;

vue-resource.js的下载地址： [https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js][https_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.js]

简单的get请求：

创建一个方法;

方法中调用 this.$http.get()来进行ajax请求；

then()方法做回调函数；

用v-on 将方法绑定到事件；

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ajax测试</title>

<script src="vue.js"></script>

<script src="vue-resource.js"></script>

</head>

<body>

<div id="app">

<input type="button" @click="get()" value="点我异步获取数据(Get)">

</div>

<script type = "text/javascript">

window.onload = function()\{

var vm = new Vue(\{

el:'\#app',

data:\{

msg:'Hello World!',

\},

methods:\{

get:function()\{

//发送get请求

this.$http.get('https://api.auto.ifeng.com/cms/api/revision/wapguide/?page=1&pageCount=10').then(function(res)\{

document.write(JSON.stringify(res.body));

\},function()\{

alert("请求失败");

\});

\}

\}

\});

\}

</script>

</body>

</html>

结果：可以看到请求成功了，返回的是json格式的数据；

![Image 1][]

转载于:https://www.cnblogs.com/ShiningArmor/p/10862885.html

[https_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.js]: https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-ajax

vue-ajax 1.异步提交Ajax的方式把数据提交到后台，得阻止表单默认提交行为 2.收集表单中的数据 <!DOCTYPE html> ...

向右看齐/ 2024年04月17日 05:23/ 0 赞/ 39 阅读

相关 vue---使用axios发送ajax请求

1：首先导入两个包，一个是Vue的包，一个是axios的包： <script src="https://cdn.jsdelivr.net/npm/vue/dist/v

拼搏现实的明天。/ 2022年12月02日 11:00/ 0 赞/ 211 阅读

相关 vue2.0发送ajax,Vue2使用ajax发送请求

Vue2使用ajax发送请求 ![beecc95b0a32b57cabb7b6dfafed45b3.png][] 2年前阅读 6728 评论 0 喜欢 0 \\\

た入场券/ 2022年09月03日 06:28/ 0 赞/ 277 阅读

相关 vue使用resource发送ajax请求

> resource下载地址：[http://www.bootcdn.cn/vue-resource/][http_www.bootcdn.cn_vue-resource]

╰半夏微凉°/ 2022年07月14日 06:26/ 0 赞/ 153 阅读

相关搭建VUE项目（三）在VUE项目中使用ajax

方式是使用axios（进入项目根目录下，执行安装命令：npminstall\--saveaxios），（存在问题：会覆盖之前安装的UI，导致项目报错，可以先安装axios，再安

清疚/ 2022年05月21日 02:43/ 0 赞/ 470 阅读

相关【VUE跨域】vue中使用AJAX jsonp实现跨域

1、vue中引入jquery，组件中的代码如下 <template> <div> 1、ajax jsonp跨域

小鱼儿/ 2022年05月19日 06:58/ 0 赞/ 242 阅读

相关 ajax使用 ajax+json

首先将ajax写于js方法中,定义事件,让元素触发,触发之后就会有数据产生给服务端 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

柔情只为你懂/ 2022年04月18日 05:13/ 0 赞/ 280 阅读

相关 vue-cli中使用ajax请求

vue-cli中使用ajax请求创建好vue-cli项目，命令行在该路径下运行以下命令 npm install --save axios 在main.

刺骨的言语ヽ痛彻心扉/ 2022年02月21日 13:40/ 0 赞/ 281 阅读

相关 vue(12)ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

柔情只为你懂/ 2022年01月11日 08:05/ 0 赞/ 154 阅读

相关 vue使用ajax

1.Vue的Ajax基本用法在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址： [https://cd

阳光穿透心脏的1/2处/ 2021年12月08日 17:51/ 0 赞/ 260 阅读