1. 程式人生 > >shop--6.店鋪註冊--js實現

shop--6.店鋪註冊--js實現

phone urn rsh har brush source ext inf 輸入流

首先要有初始化的url,一加載此js,就執行此url,進行初始化

initUrl中的getshopinitinfo 是獲取店鋪分類和區域信息,進行前端的店鋪分類和所屬區域的下拉菜單的初始化

registerShopUrl 是進行店鋪的註冊,即在前面的WEB-INF/html/shop/shopoperation.html中添加的信息,通過此url返回給後臺的Controller處理,進行店鋪的註冊

其中

$(function(){
    var initUrl = ‘/shopadmin/getshopinitinfo‘;
    var registerShopUrl = ‘/shopadmin/registershop‘;
    alert(initUrl);
    /*此方法是獲取店鋪分類和區域信息,進行前端的店鋪分類和所屬區域的下拉菜單的初始化*/
    getShopInitInfo();
    function getShopInitInfo(){
        $.getJSON(initUrl, function(data){
            if(data.success){
                var tempHtml = ‘‘;
                var tempAreaHtml = ‘‘;
                data.shopCategoryList.map(function(item, index){
                    tempHtml += ‘<option data-id="‘ + item.shopCategoryId + ‘">‘ + item.shopCategoryName + ‘</option>‘;
                });
                data.areaList.map(function(item, index){
                    tempAreaHtml += ‘<option data-id="‘ + item.areaId + ‘">‘ + item.areaName + ‘</option>‘;
                });
                $(‘#shop_category‘).html(tempHtml);
                $(‘#area‘).html(tempAreaHtml);
            }
        });
        $(‘#submit‘).click(function(){
           var shop = {};
           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];
           //在ajax中傳遞的參數
           var formData = new FormData();
           //參數的內容,分別是上面的shop和shop圖片
           formData.append(‘shopImg‘, shopImg);
           formData.append(‘shopStr‘, JSON.stringify(shop));
           /*使用ajax提交到後臺*/
           $.ajax({
               url:registerShopUrl,
               type:‘POST‘,
               data:formData,
               contentType:false,
               processData:false,
               cache:false,
               success:function(data){
                   if(data.success){
                       $.toast(‘提交成功!‘);
                   } else{
                       $.toast(‘提交失敗!‘ + data.errMsg);
                   }
               }
           })
        });
    }
})

  

 

然後在shopoperation.html中添加js的標簽

<script type=‘text/javascript‘ src=‘../resources/js/shop/shopoperation.js‘ charset=‘utf-8‘></script>

  

shop--6.店鋪註冊--js實現