vue中使用ajax
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 - axios
vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...
- vue - Vue中的ajax
只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...
- vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域
跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...
- Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档 https://githu ...
- debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误
因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- vue 中通过 ajax 获取数据时,如何避免绑定的数据中出现 property of undefined 错误
参考链接:https://segmentfault.com/q/1010000008264089?_ea=1597485
随机推荐
- 亚马逊促销活动Promotion②:Money Off(满减折扣)的设置教程
满减.折扣是放之四海皆有效的促销手段,虽然亚马逊对卖家有诸多限制,但这个促销方式却是允许的,对亚马逊的卖家而言,这对提升商品销量.打造爆款都是极好的.今天小编来讲讲亚马逊的Money Off要怎么设置 ...
- Python自学:第三章 确定列表长度
>>> cars = ["bmw", "audi", "toyota", "subaru"] > ...
- Educational Codeforces Round 53 (Rated for Div. 2)G. Yet Another LCP Problem
题意:给串s,每次询问k个数a,l个数b,问a和b作为后缀的lcp的综合 题解:和bzoj3879类似,反向sam日神仙...lcp就是fail树上的lca.把点抠出来建虚树,然后在上面dp即可.(感 ...
- python 数据分析基础
安装Python基础的几个数据分析库: pip install pandas pip install numpy pip install scipy pip install scikit-surpri ...
- 关于HttpClient上传中文乱码的解决办法
使用过HttpClient的人都知道可以通过addTextBody方法来添加要上传的文本信息,但是,如果要上传中文的话,或还有中文名称的文件会出现乱码的问题,解决办法其实很简单: 第一步:设置Mult ...
- vue-cli中怎么样使用less
1.安装安装less依赖,npm install less less-loader --save 2.修改配置文件, 在build/webpack.base.conf.js文件的module.expo ...
- python_vlc 播放http流
由于工作需要,项目功能测试用到python调用vlc,用于播放一些直播流,各种尝试后终于可以了,其实蛮简单的,就是由于没有参考自己折腾挺浪费时间的,所以把结果贴出来给需要用到的人. 准备工作: 1.首 ...
- 版本控制commit和update过程
很早就使用了git.后来还管了一个VSS,但长时间以来git和VSS基本都当ftp使用,顶多知道其有回退旧版本的功能,但对“版本控制”这个词一直以来都没领会其内含. 比如我一直担心两个问题,一是拉取下 ...
- JavaScript(ES6)学习笔记-Set和Map与数组和对象的比较(二)
一.Map,Set,Array对比: 1.增 let map = new Map(); let set = new Set(); let array = []; map.set('t',1); //M ...
- oracle如何调试存储过程
oracle如果存储过程比较复杂,我们要定位到错误就比较困难,那么可以存储过程的调试功能 先按简单的存储过程做个例子,就是上次做的存储过程(proc_test) 1.先在数据库的procedures文 ...