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的更多相关文章

  1. vue中的ajax - axios

    vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...

  2. vue - Vue中的ajax

    只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...

  3. vue中使用Ajax(axios)、vue函数中this指向问题

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...

  4. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  5. Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域

    跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...

  6. Vue 中使用Ajax请求

    Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档   https://githu ...

  7. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

  8. Vue中发送ajax请求——axios使用详解

    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...

  9. vue 中通过 ajax 获取数据时,如何避免绑定的数据中出现 property of undefined 错误

    参考链接:https://segmentfault.com/q/1010000008264089?_ea=1597485

随机推荐

  1. UML与软件建模:第一次作业(用例图绘制)

    一.小结 用例图是UML用于描述软件功能的图形.用例图包括用例.参与者及其关系,用例图也可以包括注释和结束. 用例图的要素: (1)参与者,即与用例存在交互关系的系统外部实体; (2)用例,用来描述个 ...

  2. Python+turtle交互式绘图:可以用鼠标拖动的小海龟

    下面是我画海龟的过程: (1)打开python: 2.调用turtle库,先设置一些基础设置,与一个画龟的函数 from turtle import Screen,Turtle,mainloop cl ...

  3. 弹筐里同一个按钮判断是从哪里点击过来的form

    点击弹框按钮 <form action="javascript:;" method="post">         <button type= ...

  4. 正则--test exec search match replace

    1:test 是正则对象的方法不是字符串的方法,使用例子:正则对象也就是那个设定好的模式对象 var str = "hello world!"; var result = /^he ...

  5. vue2.0项目 calendar.js(日历组件封装)

    最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...

  6. lumion物体系统,导入模型6.3

    选择物体后可以改变它的颜色 “导入”“导入新模型.”su中模型分正面反面.在lumion中显示是不一样的.正面是可以显示出来的,反面就是透明的,lumion只能识别不同的材质,所以在su中要用不同的颜 ...

  7. java FileUtil工具类

    网上的版本太多,整合了一下适合自己用的工具类,包括读取.保存.拷贝文件等. public class FileUtil { /** * 私有构造方法,防止类的实例化,因为工具类不需要实例化. */ p ...

  8. Angular2 之父子组件交互方式

    父子组件交互方式,这里介绍主要的三种方式 1.事件传值 下面以列表页和分页组件举例. list.component.html <pagination *ngIf="pageParams ...

  9. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  10. MySQL数据库SQL语句基本操作

    一.用户管理: 创建用户: create user '用户名'@'IP地址' identified by '密码'; 删除用户: drop user '用户名'@'IP地址'; 修改用户: renam ...