list vue 添加数据方法_vue ajax获取数据填充列表,增加,删除
添加品牌
Name:
IdNameCtimeOperation
{{item.id}}{{item.name}}{{item.ctime}}
删除
// 如果我们通过全局配置了,请求的数据接口 根域名,则 ,在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带 / ,否则 不会启用根路径做拼接;
Vue.http.options.root = 'http://vue.studyit.io/';
// 全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true;
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [ // 存放所有品牌列表的数组
]
},
created() { // 当 vm 实例 的 data 和 methods 初始化完毕后,vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods: {
getAllList() { // 获取所有的品牌列表
// 分析:
// 1. 由于已经导入了 Vue-resource这个包,所以 ,可以直接通过 this.$http 来发起数据请求
// 2. 根据接口API文档,知道,获取列表的时候,应该发起一个 get 请求
// 3. this.$http.get('url').then(function(result){})
// 4. 当通过 then 指定回调函数之后,在回调函数中,可以拿到数据服务器返回的 result
// 5. 先判断 result.status 是否等于0,如果等于0,就成功了,可以 把 result.message 赋值给 this.list ; 如果不等于0,可以弹框提醒,获取数据失败!
this.$http.get('api/getprodlist').then(result => {
// 注意: 通过 $http 获取到的数据,都在 result.body 中放着
var result = result.body
if (result.status === 0) {
// 成功了
this.list = result.message
} else {
// 失败了
alert('获取数据失败!')
}
})
},
add() { // 添加品牌列表到后台服务器
// 分析:
// 1. 听过查看 数据API接口,发现,要发送一个 Post 请求, this.$http.post
// 2. this.$http.post() 中接收三个参数:
// 2.1 第一个参数: 要请求的URL地址
// 2.2 第二个参数: 要提交给服务器的数据 ,要以对象形式提交给服务器 { name: this.name }
// 3.3 第三个参数: 是一个配置对象,要以哪种表单数据类型提交过去, { emulateJSON: true }, 以普通表单格式,将数据提交给服务器 application/x-www-form-urlencoded
// 3. 在 post 方法中,使用 .then 来设置成功的回调函数,如果想要拿到成功的结果,需要 result.body
/* this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
if (result.body.status === 0) {
// 成功了!
// 添加完成后,只需要手动,再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.name = ''
} else {
// 失败了
alert('添加失败!')
}
}) */
this.$http.post('api/addproduct', { name: this.name }).then(result => {
if (result.body.status === 0) {
// 成功了!
// 添加完成后,只需要手动,再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.name = ''
} else {
// 失败了
alert('添加失败!')
}
})
},
del(id) { // 删除品牌
this.$http.get('api/delproduct/' + id).then(result => {
if (result.body.status === 0) {
// 删除成功
this.getAllList()
} else {
alert('删除失败!')
}
})
}
}
});
list vue 添加数据方法_vue ajax获取数据填充列表,增加,删除相关推荐
- vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- (vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时 页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏 整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
- 通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
- select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...
- Chart.js使用及ajax获取数据
图表插件Chart.js使用 插件简介 安装 插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
- 自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
- BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录 文章目录 系列文章目录 前言 一.发送ajax网络请求获取菜单数据 二.监听树形菜单的点击事件 总结 前言 一.发送ajax网络请求获取菜单数据 我们现在的数是写死的,那么实际项目中我们 ...
- Datatables学习(二)ajax获取数据
上一篇文章,讲解了datatables的基本创建,这一讲讲解datatables通过ajax异步获取数据 1.前提准备 以一个图书管理的表格为例,后台java代码就不细说了,这里主要讲解前端 数据库表 ...
最新文章
- NEFU 1146 又见A+B
- 联机分析处理(OLAP)简介
- null 与 undefined 的区别
- 已经入门了C++,后面的路怎么走?
- Fluid 0.3 新版本正式发布:实现云原生场景通用化数据加速
- 大学生计算机等级考试c 语言程序设计,计算机等级考试c语言程序设计习题大学论文.doc...
- 「神策智能推荐」如何助力企业?惠头条、纵横文学、东方明珠、妈妈帮等这样说...
- 动态添加html元素
- spring----IOC知识点
- oracle 12.2 启用分片,关于Oracle Sharding,你想知道的都在这里
- 【Elasticsearch】使用 Elasticsearch Painless 脚本以递归方式遍历 JSON 字段
- 08-04 性能测试--复杂情景设计
- Zookeeper-02-概念
- 300G的python资料等着你
- 斗鱼赴美上市 穷途末路还是绝处逢生?
- alienfx无法与计算机,戴尔G3无法检测到AlienFX设备怎么办
- Java web 购物网站开发
- SpringSecurity认证基本原理与认证2种方式
- 网站HTML SEO优化
- Android常用adb shell命令