shop--6.店铺注册--店铺注册之js实现
1.获取初始的区域和类别
2.提交给后台
首先要有初始化的url,一加载此js,就执行此url,进行初始化
initUrl中的getshopinitinfo 是获取店铺分类和区域信息,进行前端的店铺分类和所属区域的下拉菜单的初始化
registerShopUrl 是进行店铺的注册,即在前面的WEB-INF/html/shop/shopoperation.html中添加的信息,通过此url返回给后台的Controller处理,进行店铺的注册
js页面的调试:运行Tomcat,在Chrome中按F12,找到sources,在其中找到js页面,然后打上断点就可以了,F10是步过,F8是跳过
其中加入了
getShopInitInfo() 获取店铺初始信息
getShopInfo(shopId) 通过传入的shopId,查询shop的信息,然后获取到js页面中,为后面修改shop信息做准备
$('#submit') 提交店铺信息的按钮
1 /** 2 * 3 */ 4 // 从后台获取到区域信息和地区信息 填充进去 5 $(function() { 6 var shopId = getQueryString('shopId'); 7 var isEdit = shopId ? true : false; 8 9 var initUrl = '/o2o/shopadmin/getshopinitinfo'; 10 var registerShopUrl = '/o2o/shopadmin/registershop'; 11 var shopInfoUrl = '/o2o/shopadmin/getshopbyid?shopId=' + shopId; 12 var editShopUrl = '/o2o/shopadmin/modifyshop'; 13 if (!isEdit) { 14 getShopInitInfo(); 15 } else { 16 getShopInfo(shopId); 17 } 18 function getShopInfo(shopId) { 19 $.getJSON(shopInfoUrl, function(data) { 20 if (data.success) { 21 var shop = data.shop; 22 $('#shop-name').val(shop.shopName); 23 $('#shop-addr').val(shop.shopAddr); 24 $('#shop-phone').val(shop.phone); 25 $('#shop-desc').val(shop.shopDesc); 26 var shopCategory = '<option data-id="' 27 + shop.shopCategory.shopCategoryId + '" selected>' 28 + shop.shopCategory.shopCategoryName + '</option>'; 29 var tempAreaHtml = ''; 30 data.areaList.map(function(item, index) { 31 tempAreaHtml += '<option data-id="' + item.areaId + '">' 32 + item.areaName + '</option>'; 33 }); 34 $('#shop-category').html(shopCategory); 35 $('#shop-category').attr('disabled', 'disabled'); 36 $('#area').html(tempAreaHtml); 37 $("#area option[data-id='"+shop.area.areaId+"']").attr('data-id', shop.areaId); 38 } 39 }); 40 } 41 function getShopInitInfo() { 42 $.getJSON(initUrl, function(data) { 43 if (data.success) { 44 var tempHtml = ''; 45 var tempAreaHtml = ''; 46 data.shopCategoryList.map(function(item, index) { 47 tempHtml += '<option data-id="' + item.shopCategoryId 48 + '">' + item.shopCategoryName + '</option>'; 49 }); 50 data.areaList.map(function(item, index) { 51 tempAreaHtml += '<option data-id="' + item.areaId + '">' 52 + item.areaName + '</option>'; 53 }); 54 $('#shop-category').html(tempHtml); 55 $('#area').html(tempAreaHtml); 56 } 57 }); 58 } 59 // 60 $('#submit').click(function() { 61 var shop = {}; 62 if(isEdit){ 63 shop.shopId = shopId; 64 } 65 shop.shopName = $('#shop-name').val(); 66 shop.shopAddr = $('#shop-addr').val(); 67 shop.phone = $('#shop-phone').val(); 68 shop.shopDesc = $('#shop-desc').val(); 69 shop.shopCategory = { 70 shopCategoryId : $('#shop-category').find('option').not(function() { 71 return !this.selected; 72 }).data('id') 73 }; 74 shop.area = { 75 areaId : $('#area').find('option').not(function() { 76 return !this.selected; 77 }).data('id') 78 }; 79 var shopImg = $('#shop-img')[0].files[0]; 80 var formData = new FormData(); 81 formData.append('shopImg', shopImg); 82 formData.append('shopStr', JSON.stringify(shop)); 83 var verifyCodeActual = $('#j_captcha').val(); 84 if (!verifyCodeActual) { 85 $.toast('请输入验证码!'); 86 return; 87 } 88 formData.append('verifyCodeActual', verifyCodeActual); 89 $.ajax({ 90 url : (isEdit ? editShopUrl : registerShopUrl), 91 type : 'POST', 92 data : formData, 93 contentType : false, 94 processData : false, 95 cache : false, 96 success : function(data) { 97 console.log(data) 98 if (data.success) { 99 $.toast('提交成功'); 100 } else { 101 $.toast('提交失败' + data.errMsg); 102 } 103 $('#captcha_img').click(); 104 }, 105 error : function(err) { 106 console.log(err.status); 107 console.log('异常'); 108 } 109 110 }); 111 }); 112 })
然后在shopoperation.html中添加js的标签
1 <script type='text/javascript' src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
其中的initUrl='/shopadmin/getshopinitinfo'; 中的初始化调用方法
1 @RequestMapping(value="getshopinitinfo", method=RequestMethod.GET) 2 @ResponseBody 3 public Map<String, Object> getShopInitInfo(){ 4 Map<String, Object> modelMap = new HashMap<>(); 5 List<ShopCategory> shopCategoryList = new ArrayList<>( ); 6 List<Area> areaList = new ArrayList<>( ); 7 try{ 8 shopCategoryList = shopCategoryService.getShopCategoryList( new ShopCategory() ); 9 areaList = areaService.getAreaList(); 10 } catch(Exception e){ 11 modelMap.put("success", false); 12 modelMap.put("errMsg", e.toString()); 13 } 14 modelMap.put( "shopCategoryList", shopCategoryList ); 15 modelMap.put( "areaList", areaList ); 16 modelMap.put( "success", true ); 17 return modelMap; 18 19 }