Vue+ajax的使用小结
js
var vue = new Vue({
el:"#vueid",
data:{
selectById : "",
},
methods:{
yourMethod:function(id){
$.ajax({
type : "POST",
url : "selectCsdbById.shtml",
data : {
id : id,
},
success : function(data) {
var message = $.parseJSON(data);//后台返回的json数据需要转为对象
vue.selectById=message;//把后台返回的JSON数据赋给selectById
},
error : function(){
alert("错误");
} });
},
updateById:function(){
$.ajax({
type : "POST",
url : "updateById.shtml",
data : vue.selectById,
success : function(data) {
alert(data);
},
error : function(){
alert("错误");
} });
},
}
})
html
<div id="vueid">
<input type="text" name="name" v-model="selectById.name" > //v-model实现数据的双向绑定
</div>
注意:使用<a>标签时,必须令href="JavaScript:void(0)",这样做的作用是禁止页面刷新(表示页面不做任何动作),否则vue渲染会失败
总结:
使用vue+ajax可以有效的减少页面的刷新,并且不需要拼接html代码,当需要更新表单时,由于v-model的双向绑定,只需要提交相应的对象就行,对象里的数据已经自动替换了。(刚接触VUE,菜鸟一枚,写的不好勿喷!!!同时希望各位大神指出不对的地方!O(∩_∩)O谢谢!!!!)
Vue+ajax的使用小结的更多相关文章
- vue + ajax + php 接口的使用小接
vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...
- vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- vue的路由设置小结
vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- vue之条件语句小结
vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...
- vue+ajax+bootstrap+python实现增删改
http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...
- Vue学习之vue-resource小结(五)
一.Vue实现数据交互的方式: 1.Vue除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求: 2.常见的数据请求类型有: get.post.jsonp 3.JSONP ...
随机推荐
- AtCoder Grand Contest 004 C - AND Grid
题意: 给出一张有紫色点的网格,构造一张红点网格和一张蓝点网格,使红蓝点的交集为紫色点. 保证网格四周没有紫色点. 构造一下,使蓝点和红点能够到每个点. #include<bits/stdc++ ...
- ACCESS与SQL Server下SQL Like 查询的不同
在ACCESS中LIKE的用法Access里like的通配符用法是这样: “?”表示任何单一字符: “*”表示零个或多个字符: “#”表示任何一个数字 所以应该是: select * from dat ...
- 2018.9南京网络预选赛(J)
传送门:Problem J https://www.cnblogs.com/violet-acmer/p/9720603.html 变量解释: need[ i ] : 第 i 个房间含有的旧灯泡个数. ...
- mac subLime3 JSON 格式化插件安装
1.首先找到路径:/Users/hou***in/Library/Application' 'Support/Sublime' 'Text' '3/Packages/ 2.git clone http ...
- GoLang基础数据类型--->数组(array)详解
GoLang基础数据类型--->数组(array)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang数组简介 数组是Go语言编程中最常用的数据结构之一.顾名 ...
- javascript 5秒后关闭广告案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysql 缓存机制
了解mysql缓存吗(顺丰) mysql缓存机制就是缓存sql 文本及缓存结果,用KV形式保存再服务器内存中,如果运行相同的sql,服务器直接从缓存中去获取结果,不需要在再去解析.优化.执行sql. ...
- Codeforces 950 C. Zebras
http://codeforces.com/contest/950/problem/C 题意: 给出一个01序列,问能否将这个序列分为若干个0开头0结尾的序列 输出方案 如果有解,几个1能在一个序列就 ...
- MyBatis参数传递
一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...
- spring注解第06课 @Value
1.注入<bean>中的属性 支持3种类型的赋值 <bean id="person" class="com.model.Person"> ...