请稍等 ...
×

采纳答案成功!

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

前端不显示下拉列表

老师你好 :
访问 : http://localhost:8080/O2O/shopadmin/shopoperation, 这个链接, 并没有显示下拉列表.
我测试了 ShopCategoryService 和 ShopCategoryDao 都没有问题.
然后直接访问 http://localhost:8080/O2O/shopadmin/getshopinitinfo 也可以得到数据. 这里说明路由路径设置也没有问题.
我在 js 的文件中设置了log 输出

console.log(2);
function getShopInitInfo() {
        console.log(1);
        $.getJSON(initUrl, function(data) {
            console.log(data);
            if (data.success) {
                console.log(data);

访问 http://localhost:8080/O2O/shopadmin/getshopinitinfo 的时候, 控制台输出 2, 到那时并没有输出 1, 所以没有进入到这个函数.

贴出前面部分的代码, 希望老师能指导一下可能的问题, 确实找了很久了.

$(function(){
    var initUrl = '/o2o/shopadmin/getshopinitinfo';
    var registerShopUrl = '/o2o/shopadmin/registershop';

    console.log(2);
    function getShopInitInfo() {
        console.log(1);
        $.getJSON(initUrl, function(data) {
            console.log(data);
            if (data.success) {
                console.log(data);
                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-cateogry').html(tempHtml);
                $('#area').html(tempAreaHtml);
            }
        });

谢谢老师 !

正在回答

6回答

翔仔 2020-01-16 02:32:05

同学好,看代码像是同学光定义getShopInitInfo这个方法,但是并没有使用到它,可以参考我的源码

/**
 * 
 */
$(function(){
	var initUrl = '/o2o/shopadmin/getshopinitinfo';
	var registerShopUrl = '/o2o/shopadmin/registershop';
	getShopInitInfo();
	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(){
			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();
				}
			});
		});
	}
})


0 回复 有任何疑惑可以回复我~
  • 提问者 姜岑 #1
    谢谢老师, 这里确实是我疏忽了. 加上去之后, getShopInitInfo() 函数执行了, 但是执行到 $.getJSON 就停下来了, 在 getShopInitInfo() 设置了断点, 但是执行到 getJSON 函数还是停了, 我看了 html 代码, javascript 也没有引错, 麻烦老师再看看. 下面贴出了我的调试的信息.
    回复 有任何疑惑可以回复我~ 2020-01-16 15:22:28
提问者 姜岑 2020-01-16 16:54:03

在 chrome 中进行调试, 进入到 $.ajax 函数, 然后就进入到 zepto.min.js, 从这个 zepto.min.js 里面出来之后就直接跳到 $('submit').click(function() 函数了, 所以这里定位到问题肯定是 $.ajax 函数的.

https://img1.sycdn.imooc.com//szimg/5e20240509e0690e05120448.jpg

使用 $.getJSON 也是同样的情况. 

0 回复 有任何疑惑可以回复我~
  • 翔仔 #1
    同学好,error里面的alert没有出来对不,你可以直接复制粘贴我的js代码,替换下试试?跳到submit正常呢因为是异步执行,或者在success或者erorr里都设置一个断点试试,其他断点全去了
    回复 有任何疑惑可以回复我~ 2020-01-16 20:10:43
  • 提问者 姜岑 回复 翔仔 #2
    error 里面的 alert 出来了, 得到如下结果 :
    XMLHttpRequest : 404
    textStatus : 4
    errorThrown : error.
    回复 有任何疑惑可以回复我~ 2020-01-16 20:29:13
  • 提问者 姜岑 回复 翔仔 #3
    直接换成老师的代码, 在$.getJSON(initUrl,function(data)函数里面设置断点的话, 就得到 
    zepto.min.js:2 GET http://localhost:8080/o2o/shopadmin/getshopinitinfo 404 的错误
    回复 有任何疑惑可以回复我~ 2020-01-16 20:30:50
提问者 姜岑 2020-01-16 16:22:32

看了老师给其他同学的回答: 将$.getJSON替换成$.ajax试试,然后打印error里的参数, 得到的
XMLHttpRequest : 404
textStatus : 4
errorThrown : error.
所以这里换成 $.ajax 函数就运行了, 但是 $.getJSON 函数就没有运行. 再看看其他同学的提问, 查查资料.

0 回复 有任何疑惑可以回复我~
提问者 姜岑 2020-01-16 15:30:32

这是 chrome 控制台的信息, 老师看一下方向, 我查了一下 getJSON 不执行可能是数据的 JSON 格式错误, 但是这里使用了 @ResponseBody 的话, 应该 JSON 格式不会出错,  奇怪的是, 我在 http://localhost:8080/O2O/shopadmin/shopoperation 这个页面, 将地址后面的 shopoperation 改为 getshopinitinfo 是可以看到 JSON 数据的, 但是如果复制控制台报 404 的这个页面 http://localhost:8080/o2o/shopadmin/getshopinitinfo , 新建一个窗口访问的话, 是会报 404的. controller 里面的路径都是按照视频来的, 这里可能的错误麻烦老师看看, 辛苦了.

https://img1.sycdn.imooc.com//szimg/5e201113095d8afe16130121.jpg

https://img1.sycdn.imooc.com/szimg/5e201113092eba7e08020275.jpg

https://img1.sycdn.imooc.com//szimg/5e201113094763c816700773.jpg


0 回复 有任何疑惑可以回复我~
提问者 姜岑 2020-01-15 21:13:51

完整的 shopoperation.js 的代码 :

https://img1.sycdn.imooc.com//szimg/5e1f100709701a3108470691.jpg

https://img1.sycdn.imooc.com//szimg/5e1f10080962626a08470621.jpg


0 回复 有任何疑惑可以回复我~
提问者 姜岑 2020-01-15 20:32:31

这里好像是内部函数定义了需要调用, 但是视频里老师好像也没有调用, 有些困惑, 希望老师解答. 卡了很久.

0 回复 有任何疑惑可以回复我~
  • 同学请问您解决了吗?
    回复 有任何疑惑可以回复我~ 2020-04-06 17:34:29
  • 同学请问这个问题最后你解决了吗?我也被这个问题给难住了
    回复 有任何疑惑可以回复我~ 2020-05-04 16:12:09
  • 问了下前端的同学,是输入地址有问题,
    将initUrl 改为 'http://localhost:8080/shopadmin/getshopinitinfo'就能显示了,另外,我的是IDEA,不用输项目名称
    回复 有任何疑惑可以回复我~ 2020-05-04 17:28:43
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信