实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，我在前后端调试的时候，前端的js代码总是获取不到表单中填入的信息，以下是我的代码，还麻烦老师指导一下。

来源：4-13 前后端联调验证整体模块功能

价值创造营

2018-03-08

问题：

http://img.mukewang.com/szimg/5aa00d1a00011d7e04700210.jpg

代码：

http://img.mukewang.com/szimg/5aa00d500001720705410172.jpg

http://img.mukewang.com/szimg/5aa00dec0001abef07880515.jpg

http://img.mukewang.com/szimg/5aa00e060001b0fc05790515.jpg

http://img.mukewang.com/szimg/5aa00e17000155cf06700452.jpg


写回答

9回答

翔仔

2018-03-09

同学小可爱好。。我把你的代码原封不懂贴到我的工程里面去复用，发现就第一个问题是没有问题的呀，我能获取到控件的值呢。。

//img.mukewang.com/szimg/5aa24ced0001dec023401196.jpg

是不是你本来就没问题，调试的时候才停到shop.shopName的时候，当时它的值肯定是undefined的，当f11移动到下一步的时候，shop.shopName就有值了。。。。

0
5
翔仔
回复
价值创造营
同学也把我坑到了，我想码农数十载，从来没遇到这么奇怪的问题：），继续下去吧年轻人
2018-03-10
共5条回复

价值创造营

提问者

2018-03-09

<!-- 区域分类 下拉列表 -->
                    <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 -->
                    <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"> <!-- 引用web.xml中Kaptcha的servlet -->
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" 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>
<!-- 当前根目录为WEB-INF，要访问到resources目录下的文件，需要退出当前目录  .. -->
<script type="text/javascript" src="../resources/js/shop/shopoperation.js" charset='utf-8'></script>
<script type="text/javascript" src="../resources/js/common/common.js" charset='utf-8'></script>
</body>
</html>


0
0

价值创造营

提问者

2018-03-09

Html代码：

shopoperation.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>
                    <!-- 商店名称 -->
                    <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>


0
0

价值创造营

提问者

2018-03-09

JS代码：


shopoperation.js

/**
 * 1. js代码从后台获取商店信息表中的【商店类别】和【所属区域】中的数据，并填充到
 *    对应的html控件中。
 * 2. 在点击提交按钮之后，将数据使用Ajax异步提交到后台。
 * */
$(function () {
    var initUrl = '/o2o/shopadmin/getshopinitinfo';
    var registerShopUrl = '/o2o/shopadmin/registershop';
    getShopInitInfo();
    //1. 从后台获取【商店类别】和【所属区域】中的数据
    //取得所有二级店铺类别以及区域信息，并分别赋值进类别列表以及区域列表
    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>';
                });
                //在html控件中显示
                $('#shop-category').html(tempHtml);
                $('#area').html(tempAreaHtml);
            }
        })
    }
    //2. 点击表单时获取表单中的内容
    $('#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];
        var formData = new FormData();
        //提交数据到后台（键要和后台中的一致）
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));
        //提交验证码至后台
        var verifyCodeActual = $('#j_captcha').val();
        if (!verifyCodeActual){
            $.toast("请输入验证码");
            return;
        }
        formData.append('verifyCodeActual',verifyCodeActual);
        $.ajax({
            url:registerShopUrl,
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            cache:false,
            success:function (data) {
                if (data.success){
                    $.toast('提交成功！');
                }else {
                    $.toast('提交失败！' + data.errMsg);
                }
                //点击提交按钮之后，不管是否成功，验证码都要更换
                $('#captcha_img').click();
            }
        })
    })
});

common.js


/**
 * 该js文件为公用文件
 * */
//验证码相关方法
function changeVerifyCode(img) {
    img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}


0
0

翔仔

2018-03-09

请问同学有没有按照操作去做，问题解决了吗

0
2
翔仔
回复
价值创造营
同学可以把代码贴到这里或者群里，贴到这里的话需要再回复区里选择javascript选项，然后再在里面贴，贴html还有js代码，获取不到值的话问题肯定是出在这些代码里面，这样子才能显示出看得清楚的代码，然后翔仔帮你看看哈
2018-03-09
共2条回复

翔仔

2018-03-08

同学好，你要不先对比下我这边的代码，有可能是不是你的中英文符号的问题，

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();
			}
		});
	});

})

shopoperation.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>

405错误的原因

产生原因：web服务器找不到service方法处理请求。

检查方向：

　　① controller方法名称写错

　　② controller方法参数类型与标准不一致

　　③ controller方法异常，返回值类型和标准不一致

　　④ method = "post"，服务器不识别，需改成大写"POST"


0
2
翔仔
回复
价值创造营
同学好，编程过程中肯定会遇到很多问题，这在工作中非常常见，并且有很多问题同事都帮不了你，需要自己独立解决，翔仔希望锻炼出同学自行解决问题的能力，别人帮解决的问题下次还将会是一个问题，如果能力没锻炼出来，学习就失去了意义，所以不要急躁，梳理好问题。翔仔想要达到的目的是逐步引导同学自行解决问题，并且由于平时也在上班，每次都有加Q帮忙解决的话确实也忙不过来，请多多包涵， 我们可以看看，现在有两个问题：1.前端js获取不到值 2.报405错误 405错误咱们已经有了排查思路，但是前提是问题1先得到解决。同学可以在shopoperation.html 这个标签里填写一个值，然后在按钮click提交事件里调用console.log(shop.shopName = $('#shop-name').val();) 即提交的时候看看控制台能否输出你填写的值。 追踪问题的时候要利用浏览器的console控制台去看看会有什么错以及输出了什么信息，这样去排查，做这个事情之前记得清空浏览器缓存，不然看起来代码没有变化的。 此外，同学也可以加入到群里在群里提问，和群里很多已经完成教程的大牛交流，或许他们能更快帮到同学：）
2018-03-08
共2条回复

价值创造营

提问者

2018-03-08

老师，这是我的html和js代码，但还是调试不行。

//img.mukewang.com/szimg/5aa0f7bc000157d808720371.jpg

//img.mukewang.com/szimg/5aa0f80e0001c24c08500517.jpg

//img.mukewang.com/szimg/5aa0f8b400015eeb13460605.jpg


0
0

翔仔

2018-03-08

同时，断点得移动到下一步才能观察上一步的值，同学如果jquery语法不太懂的话也可以去找个入门的书本 或者 w3school快速入门下，几个小时即可：）

0
0

翔仔

2018-03-08

同学好，我的js代码片段如下

		// 获取表单里的数据并填充进对应的店铺属性中
		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];

同学的valueOf()不对吧。。请仔细和视频核对。。并且同学得确保id为shop-name等的标签在对应的html代码中存在并且你在页面里已经确实填写了值，这样才能获取到值，此外，记得修改完前端代码后清空下浏览器缓存再看结果。。

0
0

Java双版本（SSM到SpringBoot）校园商铺全栈开发

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

5113 学习 · 8144 问题

查看课程

相似问题

店铺休息修改 前端调试问题

回答 1

前端获取不了数据库区域，店铺类别等信息

回答 6

老师，我照着你的写的，但是出了问题，就是在util工具类里面无法取得前端输入的验证码

回答 3

debug启动的时候访问前端页面时会抛出异常，并且前端页面访问不到，无法进行前端调试

回答 1

JSON传到后台的值获取总是Null

回答 2

打开慕课网App查看更多内容