zoukankan      html  css  js  c++  java
  • 校园商铺-6店铺编辑列表和列表功能-4店铺信息编辑之前端实现

    1.common.js匹配shopId

    /**
     * 
     */
    function changeVerifyCode(img){
    	img.src="../Kaptcha?" + Math.floor(Math.random()*100);
    }
    
    function getQueryString(name){
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //没有*,会只有个位数字匹配成功;加上*,就可以匹配任意长度
    	var r = window.location.search.substr(1).match(reg);
    	if(r != null){
    		return decodeURIComponent(r[2]);
    	}
    	return '';
    }
    

    2.shopoperation.js要实现以下2个功能:

    • 1.根据店铺ID获取店铺信息
    • 2.修改店铺
    /**
     * 
     */
    $(function(){
    	//从请求的URL中匹配到shopId
    	var shopId = getQueryString('shopId');
    	var initUrl = '/o2o/shopadmin/getshopinitinfo';//获取店铺的初始信息,还未定义
    	var registerShopUrl = '/o2o/shopadmin/registershop';//注册店铺
    	var shopInfoUrl = '/o2o/shopadmin/getshopbyid?shopid=' + shopId;
    	var editShopUrl = '/o2o/shopadmin/modifyshop';
    	//定义一个变量,用来传递状态:传递店铺,默认对店铺进行更新;不传,默认注册店铺
    	var isEdit = shopId?true:false;
    	if(!isEdit){
    		getShopInitInfo();//没有shopId就是注册,调用初始化
    	}else{
    		getShopInfo(shopId);//有shopId就是修改,查询店铺信息
    	}
    	
    	function getShopInfo(shopId){
    		$.getJSON(shopInfoUrl,function(data){
    			if(data.success){
    				var shop = data.shop;
    				$('#shop-name').val(shop.shopName);
    				$('#shop-addr').val(shop.shopAddr);
    				$('#shop-phone').val(shop.phone);
    				$('#shop-desc').val(shop.shopDesc);
    				var shopCategory = '<option data-id="' 
    					+ shop.shopCategory.shopCategoryId + '" selected>'
    					+ shop.shopCategory.shopCategoryName + '</option>';
    				var tempAreaHtml = '';
    				data.areaList.map(function(item, index){
    					tempAreaHtml += '<option data-id="' + item.areaId +'">'
    					+item.areaName + '</option>';
    				});
    				$('#shop-category').html(shopCategory);
    				$('#shop-category').attr('disabled','disabled');
    				$('#area').html(tempAreaHtml);
    				$('#area option[data-id="'+shop.area.areaId+'"]').attr("selected", "selected");
    			}
    		});
    	}
    //	定义第一个方法getShopInitInfo:获取商铺分类、区域的列表信息
    	function getShopInitInfo(){
    //		alert(initUrl);//调试弹窗,证明js文件被加载
    		$.getJSON(initUrl,function(data){ //访问的URL,回调方法
    			if(data.success){ //true
    				var tempHtml = '';//存放店铺类别列表
    				var tempAreaHtml = '';//存放区域列表
    				data.shopCategoryList.map(function(item,index){
    					//用map遍历店铺类别列表,生成如<option data-id="1">盖浇饭</option>的列表
    					tempHtml += '<option data-id="' + item.shopCategoryId + '">' +item.shopCategoryName + "</option>";
    				});
    				data.areaList.map(function(item,index){
    					//用map遍历区域列表,生成如<option data-id="1">东苑</option>的列表
    					tempAreaHtml += '<option data-id="' + item.areaId + '">' + item.areaName + '</option>';
    				});
    				//完成遍历之后,将获取到的信息,塞进前台定义好的id里面 #是css的用法,代表id
    				$('#shop-category').html(tempHtml);
    				$('#area').html(tempAreaHtml);
    			}
    		});
    	}
    	//第二个方法:点击提交,获取到表单信息,通过ajax转发到后台
    	$('#submit').click(function(){
    		var shop={};//json对象
    		if(isEdit){
    			shop.shopId = shopId;
    		}
    		//获取控件的信息
    		shop.shopName = $('#shop-name').val();
    		shop.shopAddr = $('#shop-addr').val();
    		shop.phone = $('#shop-phone').val();
    		shop.shopDesc = $('#shop-desc').val();
    		shop.shopCategory = {
    				shopCategoryId:$('#shop-category').find('option').not(function(){//返回被选中的
    					return !this.selected;
    				}).data('id')
    		};
    		shop.area = {
    				areaId:$('#area').find('option').not(function(){
    					return !this.selected;
    				}).data('id')
    		};
    		var shopImg = $('#shop-img')[0].files[0];
    		var formData = new FormData();//定义表单,用于接收
    		formData.append('shopImg',shopImg);
    		formData.append('shopStr',JSON.stringify(shop));//将json转换成字符流
    		var verifyCodeActual = $('#j_kaptcha').val();
    		if(!verifyCodeActual){
    			$.toast('请输入验证码!');
    			return;
    		}
    		formData.append('verifyCodeActual',verifyCodeActual);
    		$.ajax({
    			url: (isEdit ? editShopUrl:registerShopUrl),
    			type:'POST',
    			data:formData,
    			contentType:false,//既要传文件,又要传文字,设为false
    			processData:false,
    			cache:false,
    			success:function(data){
    				if(data.success){
    					$.toast("提交成功!");
    				}else{
    					$.toast("提交失败:"+data.errMsg);
    				}
    				$('#captcha_img').click()
    			}
    		});
    	});
    })
    

    3.验证

    以debug模式启动服务,在controller层getShopById和modifyShop第一行添加断点
    浏览器打开地址http://127.0.0.1:18080/o2o/shopadmin/shopoperation?shopId=1
    在js代码shopId定义处和submit方法第一行添加断点
    结果:

  • 相关阅读:
    BestCoder6 1002 Goffi and Squary Partition(hdu 4982) 解题报告
    codeforces 31C Schedule 解题报告
    codeforces 462C Appleman and Toastman 解题报告
    codeforces 460C. Present 解题报告
    BestCoder3 1002 BestCoder Sequence(hdu 4908) 解题报告
    BestCoder3 1001 Task schedule(hdu 4907) 解题报告
    poj 1195 Mobile phones 解题报告
    二维树状数组 探索进行中
    codeforces 460B Little Dima and Equation 解题报告
    通过Sql语句控制SQLite数据库增删改查
  • 原文地址:https://www.cnblogs.com/csj2018/p/12229219.html
Copyright © 2011-2022 走看看