shop--7.店铺编辑和列表--更新店铺的信息 前端实现 js

连接上面的shop--6.店铺注册--js实现

在请求的url上输入的值，在js中通过正则表达式的匹配规则来获取

方法commons.js中的

/**
 * 获取前端url中的name的id值
 * @param name
 * @returns {*}
 */
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 '';
}

　　

js代码中调用

//通过该方法获取是否传了shopId  如果传了shopId，则是对shop进行更新，否则就是进行注册
    var shopId=getQueryString('shopId');
    var isEdit=shopId ? true : false;

    var shopInfoUrl='/shopadmin/getshopbyid?shopId=' + shopId;
    var editShopUrl='/shopdamin/modifyshop';

　　

通过isEdit来判断是修改店铺信息还是注册店铺，来调用不同的方法

    if(!isEdit){
        getShopInitInfo();
    } else{
        getShopInfo(shopId);
    }

　　

然后通过getShopInfo方法获取店铺的信息（为后面修改店铺信息做准备）

//通过传入的shopId，查询shop的信息，然后获取到js页面中，为后面修改shop信息做准备
    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);
                //将shopCategory的信息以option的形式保存，然后赋值到下面的shop_category，并且它的attr是disabled的（不可选择的）
                //area是以下拉列表的形式保存，area的attr默认选择的是现在的店铺区域信息
                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");

} }); }

　　

总体的

$(function(){
    //通过该方法获取是否传了shopId  如果传了shopId，则是对shop进行更新，否则就是进行注册
    var shopId=getQueryString('shopId');
    var isEdit=shopId ? true : false;


    var initUrl='/shopadmin/getshopinitinfo';
    var registerShopUrl='/shopadmin/registershop';

    var shopInfoUrl='/shopadmin/getshopbyid?shopId=' + shopId;
    var editShopUrl='/shopadmin/modifyshop';
    //通过isEdit来判断是修改店铺信息还是注册店铺，来调用不同的方法
    if(!isEdit){
        getShopInitInfo();
    } else{
        getShopInfo(shopId);
    }

    /*此方法是获取店铺分类和区域信息，进行前端的店铺分类和所属区域的下拉菜单的初始化*/
    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);
            }
        });
    }


    //通过传入的shopId，查询shop的信息，然后获取到js页面中，为后面修改shop信息做准备
    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);
                //将shopCategory的信息以option的形式保存，然后赋值到下面的shop_category，并且它的attr是disabled的（不可选择的）
                //area是以下拉列表的形式保存，area的attr默认选择的是现在的店铺区域信息
                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");
            }
        });
    }

    //提交按钮，将店铺信息提交到后台进行处理 url根据isEdit来分情况选择
    $('#submit').click(function(){
        var shop = {};
        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];
        //在ajax中传递的参数
        var formData = new FormData();
        //参数的内容，分别是上面的shop和shop图片
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));
        var verifyCodeActual = $('#j_kaptcha').val();
        if(!verifyCodeActual){
            $.toast('请输入验证码！');
            return;
        }
        formData.append('verifyCodeActual', verifyCodeActual);
        /*使用ajax提交到后台*/
        $.ajax({
            url:(isEdit?editShopUrl:registerShopUrl),
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            cache:false,
            success:function(data){
                if(data.success){
                    $.toast('提交成功！');
                } else{
                    $.toast('提交失败！' + data.errMsg);
                }
                /*更换验证码*/
                $('#kaptcha_img').click();
            }
        });
    });

});