后面接shop--7.店铺编辑和列表--更新店铺的信息 前端实现 js
首先要有初始化的url，一加载此js，就执行此url，进行初始化
initUrl中的getshopinitinfo 是获取店铺分类和区域信息，进行前端的店铺分类和所属区域的下拉菜单的初始化
registerShopUrl 是进行店铺的注册，即在前面的WEB-INF/html/shop/shopoperation.html中添加的信息，通过此url返回给后台的Controller处理，进行店铺的注册
其中
js其实就是一个静态页面，使用script标签嵌入到html页面中
注意，在这里之前有编写错误，.data('id')后面加了 ; 导致js页面不能加载，又不报错，觉得好无奈哦，居然不报错。唉。只怪自己太大意了。
这个js是在html页面加载时就调用相应的url，来加载店铺的初始化信息的。
js页面的调试：运行Tomcat，在Chrome中按F12，找到sources，在其中找到js页面，然后打上断点就可以了，F10是步过，F8是跳过
其中加入了
getShopInitInfo() 获取店铺初始信息
getShopInfo(shopId) 通过传入的shopId，查询shop的信息，然后获取到js页面中，为后面修改shop信息做准备
$('#submit') 提交店铺信息的按钮
$(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();
}
});
});
});
然后在shopoperation.html中添加js的标签
<script type='text/javascript' src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
其中的initUrl='/shopadmin/getshopinitinfo'; 中的初始化调用方法
@RequestMapping(value="getshopinitinfo", method=RequestMethod.GET)
@ResponseBody
public Map<String, Object> getShopInitInfo(){
Map<String, Object> modelMap = new HashMap<>();
List<ShopCategory> shopCategoryList = new ArrayList<>( );
List<Area> areaList = new ArrayList<>( );
try{
shopCategoryList = shopCategoryService.getShopCategoryList( new ShopCategory() );
areaList = areaService.getAreaList();
} catch(Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.toString());
}
modelMap.put( "shopCategoryList", shopCategoryList );
modelMap.put( "areaList", areaList );
modelMap.put( "success", true );
return modelMap;
}