请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

店铺注册提交失败,每点击输入时就提示Uncaught TypeError: Cannot read property 'tagName' of null

package com.shop.o2o.web.shopadmin;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

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 com.fasterxml.jackson.databind.ObjectMapper;
import com.shop.o2o.dto.ShopExecution;
import com.shop.o2o.entity.Area;
import com.shop.o2o.entity.PersonInfo;
import com.shop.o2o.entity.Shop;
import com.shop.o2o.entity.ShopCategory;
import com.shop.o2o.enums.ShopStateEnum;
import com.shop.o2o.exceptions.ShopOperationException;
import com.shop.o2o.service.AreaService;
import com.shop.o2o.service.ShopCategoryService;
import com.shop.o2o.service.ShopService;
import com.shop.o2o.util.CodeUtil;
import com.shop.o2o.util.HttpServletRequestUtil;

@Controller
@RequestMapping("/shopadmin")
public class ShopManagementController {
	// 负责实现店铺管理相关的逻辑
	@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 {
			// 获取shop全部对象
			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());
		}
		return modelMap;

	}

	@RequestMapping(value = "/registershop", method = RequestMethod.POST)
	@ResponseBody
	private Map<String, Object> registerShop(HttpServletRequest request) {
		Map<String, Object> modelMap = new HashMap<String, Object>();
		if (!CodeUtil.checkVerifyCode(request)) {
			modelMap.put("success", false);
			modelMap.put("errMsg", "输入了错误的验证码");
			return modelMap;
		}

		// 1.接受并转化相应的参数，包括店铺信息以及图片信息
		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();
			// 后面会完善
			owner.setUserId(1L);
			shop.setOwner(owner);
			ShopExecution se;
			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 | IOException e) {
				modelMap.put("success", false);
				modelMap.put("errMsg", e.getMessage());
			}

			return modelMap;
		} else {

			modelMap.put("success", false);
			modelMap.put("errMsg", "请输入店铺信息");
			return modelMap;
		}

		// 3.返回结果
		// return modelMap;

	}

图片描述
qq_鏖战_0 2019-01-29 18:16:18
源自：4-9  店铺注册之前端设计
8361
收起

正在回答

1回答

翔仔 2019-01-29 23:40:39

同学好，请问是点击提交才报吗？还是直接加载页面就报这个错了？应该是js或者html写得有问题，

我先给你我的最终版，你直接复制粘贴，然后调整一下（我的既有编辑又有添加功能，需要同学按需移除编辑功能），最后搞定后再和你的做下对比，看看问题在哪里。

<!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>
						<!-- 验证码 ka -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">验证码</div>
									<input type="text" id="j_captcha" placeholder="验证码">
									<div class="item-input">
										<img id="captcha_img" alt="点击更换" title="点击更换"
											onclick="changeVerifyCode(this)" src="../Kaptcha" />
									</div>
								</div>
							</div>
						</li>
					</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/common/common.js'
		charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
</body>
</html>

shopoperation.js

/**
 * 
 */
$(function() {
	// 从URL里获取shopId参数的值
	var shopId = getQueryString('shopId');
	// 由于店铺注册和编辑使用的是同一个页面，
	// 该标识符用来标明本次是添加还是编辑操作
	var isEdit = shopId ? true : false;
	// 用于店铺注册时候的店铺类别以及区域列表的初始化的URL
	var initUrl = '/o2o/shopadmin/getshopinitinfo';
	// 注册店铺的URL
	var registerShopUrl = '/o2o/shopadmin/registershop';
	// 编辑店铺前需要获取店铺信息，这里为获取当前店铺信息的URL
	var shopInfoUrl = "/o2o/shopadmin/getshopbyid?shopId=" + shopId;
	// 编辑店铺信息的URL
	var editShopUrl = '/o2o/shopadmin/modifyshop';
	// 判断是编辑操作还是注册操作
	if (!isEdit) {
		getShopInitInfo();
	} else {
		getShopInfo(shopId);
	}
	// 通过店铺Id获取店铺信息
	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);
				// 给店铺类别选定原先的店铺类别值
				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 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() {
		// 创建shop对象
		var shop = {};
		if (isEdit) {
			// 若属于编辑，则给shopId赋值
			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];
		// 生成表单对象，用于接收参数并传递给后台
		var formData = new FormData();
		// 添加图片流进表单对象里
		formData.append('shopImg', shopImg);
		// 将shop json对象转成字符流保存至表单对象key为shopStr的的键值对里
		formData.append('shopStr', JSON.stringify(shop));
		// 获取表单里输入的验证码
		var verifyCodeActual = $('#j_captcha').val();
		if (!verifyCodeActual) {
			$.toast('请输入验证码！');
			return;
		}
		formData.append('verifyCodeActual', verifyCodeActual);
		// 将数据提交至后台处理相关操作
		$.ajax({
			url : (isEdit ? editShopUrl : registerShopUrl),
			type : 'POST',
			data : formData,
			contentType : false,
			processData : false,
			cache : false,
			success : function(data) {
				if (data.success) {
					$.toast('提交成功！');
					if (!isEdit) {
						// 若为注册操作，成功后返回店铺列表页
						window.location.href = "/o2o/shopadmin/shoplist";
					}
				} else {
					$.toast('提交失败！' + data.errMsg);
				}
				// 点击验证码图片的时候，注册码会改变
				$('#captcha_img').click();
			}
		});
	});

})

记得修改之后，清空浏览器缓存：）

0 回复 有任何疑惑可以回复我~
收起回答
  • 提问者 qq_鏖战_0 #1 
    老师好！加载页面没报错，当鼠标点击页面(任意一个地方)就会提示Uncaught TypeError: Cannot read property 'tagName' of null，老师为啥在视频里没看到你报这样的错误，我写的时候错误一大堆，我也看了你推荐给我的两个调试网站，但是实际操作还是不会，叫我如何是好，我也想通过调试定位问题，然后自己解决，好难啊
    回复 有任何疑惑可以回复我~ 2019-01-30 11:07:01
  • 翔仔 回复 提问者 qq_鏖战_0 #2 
    这个感觉还没到要调试的地方，因为没到业务逻辑就错了，应该是js包或者html页写得有问题，同学可以直接复制粘贴我上面给的代码试试，咱一步步来
    回复 有任何疑惑可以回复我~ 2019-01-30 21:59:35
  • 提问者 qq_鏖战_0 #3 
    非常感谢！
    回复 有任何疑惑可以回复我~ 2019-02-22 19:15:43
点开查看后面1条评论
取消 回复

相似问题

添加店铺页面点击提交能够响应，更新店铺页面点击提交不响应
1398 1 15
TypeError: cannot read property of 'use' undefined
6135 1 5
添加商铺时，点击提交会出现js的错误，‘sm.min.js:7 Uncaught TypeError: Cannot read property
1306 0 14
为什么更新店铺点提交没反应也不报错?
1287 1 13
提交失败，addShop error:###
1062 0 10

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
Java双版本（SSM到SpringBoot）校园商铺全栈开发
  • 参与学习       5137    人
  • 解答问题       8152    个

SSM商铺V1.0，解决毕设痛点；SpringBoot商铺V2.0，满足工作刚需

了解课程

本课精华内容

问答 作业

无法进入DEBUG模式

2.4k 47

getshopbyid不能返回数据显示在前端

2.5k 41

停止访问网页问题已解决，但是扫码又出现scope不能为空的错误。。。。。

3.3k 40

request.getParameter()取出的值为空

2.5k 39

老师，操作台报错说类似这样的，数据库的字段和输入的数据库的数据类型不匹配，查了半天没发现有错啊

2.3k 37

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号