前端小白的爬坑之旅(三)

最新推荐文章于 2021-03-28 15:33:23 发布

panyiyao

最新推荐文章于 2021-03-28 15:33:23 发布

阅读量160

点赞数

文章标签： VUE Ajax 循环渲染

本文链接：https://blog.csdn.net/panyiyao/article/details/103982953

版权

需要使用vue把从后台获取的数据循环渲染到页面

var vm = new Vue({
				el: '#bu',
				data: {
					trips: [],
					jpUserss: [],
					inx: '',
					tripss: []



				},
				methods: {
					dateDiff: function(sDate1) {
						var date2 = new Date();
						var date1 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
						var iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);
//判断后台返回的日期和当前日期相差几天
						return iDays;
					},
					plotClick: function(index) {
						$.modal({
							title: '是否加入行程',
							text: '',
							buttons: [{
									text: '取消'
								},
								{
									text: '确定',
									onClick: function() {
										if (vm.trips[index].surplusNumber == 0) {
											$.alert('行程已满！');
											return

										}
										if (userId == "" || userId == null || userId == undefined) {
											$.alert('无法加入');
											return
										}



										$.ajax({
											url: route + 'joinTrip',
											data: {
												joinUserId: userId,
												tripCode: vm.trips[index].tripCode
											},
											headers: {
												"Content-Type": "application/x-www-form-urlencoded;charset=utf-8 "
											},
											dataType: 'json', //服务器返回json格式数据
											type: 'post', //HTTP请求类型
											success: function(data) {
												alert(JSON.stringify(data));
												if (data > 0) {
													$.toast("加入行程成功");
													setTimeout(function() {
														window.location.href = "details.html?tripCode="+vm.trips[index].tripCode;
//跳转页面带参数

													}, 2000);


												} else {
													$.toast("您已经加入该同事的行程!!!");
												}
											},
											error: function(xhr, type, errorThrown) {
												console.log("获取失败");
											}
										});
									}
								}

							]
						})


					}

				}


			});

Ajax

$.ajax({
				url: route + 'findAllTripInfo',
				data: JSON.stringify({
					userId: userId,
					pageSize: pageSize,
					pageNum: pageNum
				}),
				headers: {
					"Content-Type": "application/json"
				},
				dataType: 'json', //服务器返回json格式数据

				type: 'post', //HTTP请求类型
				success: function(data) {
					vm.trips = data;
					jpUserss = data.jpUsers;


				},
				error: function(xhr, type, errorThrown) {

				}
			});
//页面加载就获取数据

循环渲染到页面