Vue.js之Ajax请求
Vue.js同React、Angular,可以说号称前端三巨头。
前段时间，有个哥们说，Vue.js现在出2.0版本了。可是我现在还是在用1.0的。
Vue.js一直都没有好好系统的学习，包括目前公司虽然是在用Vue,但是让我感觉用的有些偏了。比如Vue.js明明就有异步交互，但是我用的却还是jQuery的ajax,说到这也不是歧视jQuery,只不过觉得没有用到刀刃上。总觉得怪怪的。
今天贴一段代码，关于Vue.js的Ajax请求，希望能给朋友们带来帮助。
下面代码，测试完全没问题，只不过url需要改成你个人项目或公司项目对应的那个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
//发送get请求
this.$http.get('localhost:8080/test-web/database/getAllDataBaseInfo').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>
</body>
</html>
Vue.js之Ajax请求的更多相关文章
- vue.js中ajax请求
<div id="app"> <table style="border-collapse: collapse"> <thead&g ...
- vue.js遍历ajax请求的数据
<div id="dv" style="text-align: center;"><div class="head input-gr ...
- leyou_04_vue.js的ajax请求方式
1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- Vue.js使用-http请求
Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({ el: '#app' ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
随机推荐
- 洛谷 P4779 单源最短路径（标准版） 题解
题面 这道题就是标准的堆优化dijkstra: 注意堆优化的dijkstra在出队时判断vis,而不是在更新时判断vis #include <bits/stdc++.h> using na ...
- PHP常见数组排序方法小结
1.简单数组排序 sort() 函数和rsort() 函数: 语法规则: bool sort(array &array [,int sort_flags] bool rsort(array & ...
- 设计模式之单例模式（Singleton Pattern）
单例模式是最简单的设计模式之一.属于创建型模式,它提供了一种创建对象的最佳方式.使应用中只存在一个对象的实例,并且使这个单实例负责所有对该对象的调用.这种模式涉及到一个单一的类,该类负责创建自己的对象 ...
- javaweb： request.getParameter()、request.setAttribute()与request.getAttribute()的作用 （转）
出处:https://blog.csdn.net/qq_41937388/article/details/87972914 1.request.getParameter()方法是获取通过类似post, ...
- Ajax提交数据后，清空form表单
按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...
- 04.AutoMapper 之投影(Projection)
https://www.jianshu.com/p/031553705417 投影(Projection) 投影将源转换为目标而不是扁平化对象模型.如果没有额为的配置AutoMapper需要一个扁平化 ...
- jenkins配置windows节点遇到的问题
配置:https://blog.csdn.net/liuchunming033/article/details/52025541 错误: 使用slave-agent.jnlp启动时报以下错误,是mas ...
- 吴恩达深度学习：2.16关于python/numpy
- WPF中的Stretch属性
有时候我们在WPF程序中设置了图片的Width和Height,但图片显示出来的宽和高并不是我们预期的效果,这实际上是由于Image的默认Stretch属性导致的 Image的Stretch属性默认为U ...
- Delphi简介