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. Nginx 常用配置

    Nginx的负载均衡方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight和访问比率成正比,用于后端 ...

  2. Linq语句jion on后指定多个条件

    代码如下: private void FrmMain_Load(object sender, EventArgs e) { var list1 = Supplier.GetSuppliers(); v ...

  3. 面试题3--数组中的重复数字(new数组的新写法)

    总是忘了一些条件的判断,比如非空或者其他之类. #include<iostream> using namespace std; int Frepeat(int num[],int leng ...

  4. what API can do

    APIs for manipulating documents loaded into the browser. The most obvious example is the DOM (Docume ...

  5. Oracle使用

    Oracle数据库首先必须在服务器端安装,安装完成后在DBCA中创建数据库,然后在Net Configuration Assistant中配置监听程序和本地Net服务名.然后安装本地Oracle客户端 ...

  6. javascript高级程序设计第3版——第3章 基本概念

  7. IIS环境配置和项目部署

    本人实际工作项目中IIS部署,亲测可用~~ 具体步骤: 1.打开控制面板 2.打开程序和功能 3.打开或关闭Windous功能 然后勾选相关内容: 4.添加应用程序 先打开iis管理器页面(控制面板— ...

  8. 2x or 3X的图

    2.3倍图处理 bg-image($url) background-image: url($url + "@2x.png") @media (-webkit-min-device- ...

  9. hdu6396(思维+输入挂)

    Swordsman Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accept ...

  10. YML文件中ipv6地址输入格式

    关于YML文件格式可以百度,这里只说ipv6:yml文件是注重格式的不能用tab键代替空格 ipv4 :10.1.202.9 ipv6: 2001:202::6e4:f32b:c19c:4760 端口 ...