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     }