老师我页面分类和所属区域 并没显示出来
我刷新这个页面显示这样的 但没有显示出来 分类和区域
页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>SUI Mobile Demo</title> <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components."> <meta name="author" content="阿里巴巴国际UED前端"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <!-- Google Web Fonts --> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-114x114.png"> </head> <body> <div class="page-group"> <div id="page-label-input" class="page"> <header class="bar bar-nav"> <a class="button button-link button-nav pull-left back" href="/demos/form"> <span class="icon icon-left"></span> 返回 </a> <h1 class="title">商店信息</h1> </header> <div class="content"> <div class="list-block"> <ul> <!-- Text inputs --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">商铺名称</div> <div class="item-input"> <input type="text" id="shop-name" placeholder="商铺名称"> </div> </div> </div> </li> <!-- 商铺分类 下拉列表 --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">商铺分类</div> <div class="item-input"> <select id="shop-category"> </select> </div> </div> </div> </li> <!-- 区域分类 下拉列表 --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">所属区域</div> <div class="item-input"> <select id="area"> </select> </div> </div> </div> </li> <!-- 详细地址 text --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">详细地址</div> <div class="item-input"> <input type="text" id="shop-addr" placeholder="详细地址"> </div> </div> </div> </li> <!-- 联系电话 text --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">联系电话</div> <div class="item-input"> <input type="text" id="shop-phone" placeholder="联系电话"> </div> </div> </div> </li> <!-- 缩略图 上传控件 --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">缩略图</div> <div class="item-input"> <input type="file" id="shop-img"> </div> </div> </div> </li> <!-- 店铺简介 textarea --> <li class="align-top"> <div class="item-content"> <div class="item-inner"> <div class="item-title label">店铺简介</div> <div class="item-input"> <textarea id="shop-desc" placeholder="店铺简介"></textarea> </div> </div> </div> </li> <!-- 验证码 kaptcha --> </ul> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="/o2o/shopadmin/shopmanagement" class="button button-big button-fill button-danger">返回</a> </div> <div class="col-50"> <a href="#" class="button button-big button-fill button-success" id="submit">提交</a> </div> </div> </div> </div> </div> </div> <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/shop/shopoperation.js' charset='utf-8'></script> </body> </html>
js代码
//当加载这个js文件的时候就跑里面的内容
$(function() {
// 用于店铺注册时候的店铺类别以及区域列表的初始化的URL
var initUrl = '/o2o/shopadmin/getshopinitinfo';
// 注册店铺的URL
var registerShopUrl = '/o2o/shopadmin/registershop';
//这个js文件就调用这个方法
getShopInitInfo();
alert(initUrl);
//获取店铺信息
function getShopInitInfo() {
//data 回调的方法
$.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 () {
// 创建shop对象
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];
// 生成表单对象，用于接收参数并传递给后台
var formData=new FormData();
// 添加图片流进表单对象里
formData.append('shopImg', shopImg);
// 将shop json对象转成字符流保存至表单对象key为shopStr的的键值对里
formData.append('shopStr', JSON.stringify(shop));
// 将数据提交至后台处理相关操作
$.ajax({
url:registerShopUrl,
type:'Post',
data:formData,
contentType:false,
processData : false,
cache : false,
success:function (data) {
if (data.success){
$.toast('提交成功!')
}else {
$.toast('提交失败！' + data.errMsg);
}
}
})
});
})程序运行后的代码
2019-10-16 20:39:45.975 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - ==> Preparing: select shop_category_id, shop_category_name, shop_category_desc, shop_category_img, priority, create_time, last_edit_time, parent_id from tb_shop_category WHERE parent_id is not null order by priority desc 2019-10-16 20:39:45.976 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - ==> Parameters: 2019-10-16 20:39:45.977 [http-nio-8080-exec-5] DEBUG c.imooc.o2o.dao.ShopCategoryDao.queryShopCategory - <== Total: 1 2019-10-16 20:39:45.978 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - ==> Preparing: select area_id,area_name,priority,create_time,last_edit_time from tb_area order by priority desc 2019-10-16 20:39:45.978 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - ==> Parameters: 2019-10-16 20:39:45.979 [http-nio-8080-exec-5] DEBUG com.imooc.o2o.dao.AreaDao.queryArea - <== Total: 2 11
controller 代码
package com.imooc.o2o.web.shopadmin;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.imooc.o2o.dto.ShopExecution;
import com.imooc.o2o.entity.Area;
import com.imooc.o2o.entity.PersonInfo;
import com.imooc.o2o.entity.Shop;
import com.imooc.o2o.entity.ShopCategory;
import com.imooc.o2o.enums.ShopStateEnum;
import com.imooc.o2o.exceptions.ShopOperationException;
import com.imooc.o2o.service.AreaService;
import com.imooc.o2o.service.ShopCategoryService;
import com.imooc.o2o.service.ShopService;
import com.imooc.o2o.util.HttpServletRequestUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping(value = "/shopadmin")
public class ShopManagementContorller {
@Autowired
private ShopService shopService;
@Autowired
private ShopCategoryService shopCategoryService;
@Autowired
private AreaService areaService;
/**
*获取店铺分类
*/
@RequestMapping(value = "/getshopinitinfo",method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> getShopInitInfo(){
Map<String,Object> modelMap=new HashMap<String, Object>();
List<ShopCategory> shopCategoryList = new ArrayList<ShopCategory>();
List<Area> areaList = new ArrayList<Area>();
try {
shopCategoryList = shopCategoryService.getShopCategoryList(new ShopCategory());
areaList = areaService.getAreaList();
modelMap.put("shopCategoryList", shopCategoryList);
modelMap.put("areaList", areaList);
modelMap.put("success", true);
} catch (Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
System.out.println(11);
return modelMap;
}
/**
*店铺注册
*/
@RequestMapping(value = "/registershop",method = RequestMethod.POST)
@ResponseBody
private Map<String, Object> registerShop(HttpServletRequest request){
Map<String,Object> modelMap=new HashMap<String, Object>();
// 1.接收并转化相应的参数，包括店铺信息以及图片信息
System.out.println(11);
//非文件类型参数
//将json转换成对象
String shopStr=HttpServletRequestUtil.getString(request,"shopStr");
ObjectMapper mapper = new ObjectMapper();
Shop shop=null;
try {
shop=mapper.readValue(shopStr,Shop.class);
} catch (Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
return modelMap;
}
//接收上传的文件流
CommonsMultipartFile shopImg=null;
CommonsMultipartResolver commonsMultipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext());
if (commonsMultipartResolver.isMultipart(request)){
//有上传的文件流
MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest)request;
shopImg=(CommonsMultipartFile) multipartHttpServletRequest.getFile("shopImg");
}else {
//没有文件上传
modelMap.put("success", false);
modelMap.put("errMsg", "上传图片不能为空");
return modelMap;
}
// 2.注册店铺
if (shop!=null&&shopImg!=null){
PersonInfo owner=new PersonInfo();
//Session ToDo
owner.setUserId(1l);
shop.setOwner(owner);
ShopExecution se= null;
try {
se = shopService.addShop(shop,shopImg.getInputStream(),shopImg.getOriginalFilename());
if (se.getState()== ShopStateEnum.CHECK.getState()){
modelMap.put("success", true);
} else {
modelMap.put("success", false);
modelMap.put("errMsg",se.getStateInfo());
}
} catch (ShopOperationException e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
} catch (IOException e) {
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
return modelMap;
}else {
modelMap.put("success", false);
modelMap.put("errMsg", "请输入店铺信息");
return modelMap;
}
}
}26
收起
正在回答
2回答
同学你好！
1. 经过老师测试，老师发现同学在js以下位置多写了一个（）号，在js中获取指是不需要加括号，建议同学去掉测试一下。
2.建议同学今后在调试时，如果后台的控制台没有报错，可以查看一下浏览器的控制台是否报错了，这样更有利于排查错误。
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
hejunmiao
2019-10-16 21:06:00
js 这里也是成功的 
相似问题
登录后可查看更多问答，登录/注册
4. SSM到Spring Boot入门与综合实战
- 参与学习 人
- 提交作业 323 份
- 解答问题 8263 个
本阶段将带你学习主流框架SSM，以及SpringBoot ，打通成为Java工程师的最后一公里！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星