老师,没思路

老师,没思路

下拉列表和商品模板变换可以给个完整答案吗?对于小白真是太困难了啊

success:function(data,textStatus,jqXHR) 这句中的textStatus,jqXHR是什么意思?

下面两行为啥用到两次each

$.each(data,function(index,element){

$.each(element,function(index_1,element_1){

var search=$('.header-search-input').value(); //search是获取的输入框内容,是这样获取吗?

function ajax(search){

$.ajax({

type:"GET",

url:"../search.json",

dataType:"json",

success:function(data,textStatus,jqXHR){

$.each(data,function(index,element){

$.each(element,function(index_1,element_1){

switch(search){

case "鞋":

$(".list").show();

$.each(element_1.Results[0].Suggests,function(index_2,element_2){

$(".list").append($("<li></li>").text(element_2.Txt));

});

break;

case "音速3":

$(".list").show();

$.each(element_1.Results[0].Suggests,function(index_2,element_2){

$(".list").append($("<li></li>").text(element_2.Txt));

});

break;

}

});

});

}

});

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕星星 2019-01-23 19:32:56

1、需要将ajax函数放在输入框的事件中进行调用。

2、json文件路径有问题,不能按照相对于scripts文件夹的关系来引入,应该是按照localhost的路径引入。

例如文件夹关系为:

http://img1.sycdn.imooc.com//climg/5c4850cb0001cc9704530135.jpg

http://img1.sycdn.imooc.com//climg/5c4850da0001053703020262.jpg

可以参考下图修改:

http://img1.sycdn.imooc.com//climg/5c4850170001e9ca08690498.jpg

自己测试下。

提问者 小章鱼丸 2019-01-23 17:35:46

var search=$('.header-search-input').val();

function ajax(search){

$.ajax({

type:"GET",

url:"../search.json",

dataType:"json",

success:function(data,textStatus,jqXHR){

console.log(data);

$.each(data,function(index,element){

console.log(data);

$.each(element,function(index_1,element_1){

console.log(element);

switch(search){

case "鞋":

$(".list").show();

$.each(element_1.Results[0].Suggests,function(index_2,element_2){

$(".list").append($("<li></li>").text(element_2.Txt));

});

break;

case "音速3":

$(".list").show();

$.each(element_1.Results[0].Suggests,function(index_2,element_2){

$(".list").append($("<li></li>").text(element_2.Txt));

});

break;

}

});

});

}

});

}


好帮手慕星星 2019-01-23 12:06:13

你好,

1、使用jquery中的ajax,获取json数据成功之后会执行success方法,里面有三个参数:

http://img1.sycdn.imooc.com//climg/5c47e5000001e8d505410276.jpg

data是返回出来的数据,textStatus是返回出来的'success'文本,jqXHR是XMLHttpRequest对象,可以按照顺序输出看一下:

http://img1.sycdn.imooc.com//climg/5c47e5920001efb211440106.jpg

通常使用的是一个参数data,后面两个可以不用填写。

2、jquery中获取输入框中的内容应该使用val(),也就是:

var search=$('.header-search-input').val();

3、可以从获取的data中看到是两个数组:

http://img1.sycdn.imooc.com//climg/5c47e76b0001ab2703550146.jpg

第一次使用each是将一个数组循环遍历得到两个数组,第二次是分别将得到的数组循环遍历得到里面的数据。

建议同学继续跟着这个模板来写,每写一步可以看看输出的结果是什么,将最终结果拿到之后再考虑显示在页面上。如果遇到问题可以在问答区提问,老师帮助你解决问题,自己能够把这个作业完成也会有一个很大的提升哦。

祝学习愉快!

  • 提问者 小章鱼丸 #1
    老师,我这怎么都没打印出来啊? var search=$('.header-search-input').val(); function ajax(search){ $.ajax({ type:"GET", url:"../search.json", dataType:"json", success:function(data,textStatus,jqXHR){ console.log(data); $.each(data,function(index,element){ console.log(data); $.each(element,function(index_1,element_1){ console.log(element); switch(search){ case "鞋": $(".list").show(); $.each(element_1.Results[0].Suggests,function(index_2,element_2){ $(".list").append($("<li></li>").text(element_2.Txt)); }); break; case "音速3": $(".list").show(); $.each(element_1.Results[0].Suggests,function(index_2,element_2){ $(".list").append($("<li></li>").text(element_2.Txt)); }); break; } }); }); } }); }
    2019-01-23 17:35:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师