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
随机推荐
- php代码审计——DVWA
1.命令注入: LOW等级: 输入没有任何限制,可以直接ping: Medium等级: 介绍一下str_replace()函数和array_key()函数: Str_replace(str1,str2 ...
- POST调用WCF方法-项目实践
做即时通信项目时,需要与OA系统对接接口,主要目标是实现在OA里进行一项事项,通过调用我们的接口,即时通知过来,并弹出消息框提示一下.我们的即时通信使用的WCF服务进行通信,在客户端调用通信时,用的就 ...
- PAT 1148 Werewolf - Simple Version
1148 Werewolf - Simple Version (20 分) Werewolf(狼人杀) is a game in which the players are partitioned ...
- licode测试
https://github.com/lynckia/licode/tree/master/test 使用js模拟客户端调用,也可以使用mocha来进行同样的测试
- mysql5.7 for windows二进制安装及配置
1)mysql5.7二进制软件下载 下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载软件:mysql-5.7.25-wi ...
- UIPath Level 2&3
Level 3 走了很多弯路,但是学到了很多东西,贴一个Level3的吧,其他的省略了 认认真真独立做完Level3的两个POC,相信你对UIPath的理解会更深入一步 晚安,祝各位中秋节快乐!
- 在Linux和Windows之间的远程控制的实现
主要开发工作用Linux,邮件和文档等主要在Windows,两者之间经常需要传输数据,两台主机都必须同时运行着. 但是,通常来说,它们需要同时准备两套显示器.鼠标和键盘,既占地方又不够方便. 远程控制 ...
- eclipse里没有j2ee
eclipse是客户端开发工具,本来就不带有j2ee的jar包,需要容器:比如tomcat来提供这个jar的.j2EE通用jar包列表:IKIKAnalyzer3.2.8.jar // 分词器ant- ...
- 用批处理修改hotst文件提示“拒绝访问”解决方法
执行批处理命令时出现“拒绝访问”情况,把路径地址改为系统路名变量即可: 如 提示拒绝访问: echo 127.0.0.1 www.dujinchi.com >> C:\Windows\Sy ...
- HFun.快速开发平台(一)=》简述
[——使用成熟的技术实现了解的业务,关注面向对象,关注业务领域] 偶然的机会又回到了园子,看到上次的文章已是N年前,洽巧近期正在开发一个小程序,标题定为“快速开发平台”有点夸张,算是给自己定个小目标. ...