需要把get()放到事件中才能体现ajax异步获取数据吗
源代码有小改动,效果实现了,就是代码写的不太好
// 搜索功能模块
(function(){
var searchData=null,
shoesData=null,
content=$(".commodityContainer").html();
// ajax获取json数据
$.get("./json/search.json",function(data){
searchData=data;
});
$.get("./json/basketballShoes.json",function(data){
shoesData=data;
});
// 输入框输入字符事件
$(".header-search-input").eq(0).on("input",function(){
for(var i in searchData){
if(this.value==searchData[i][0].Query){
var suggests=searchData[i][0].Results[0].Suggests;
for(var j in suggests){
var data="<li>"+suggests[j].Txt+"</li>";
$(".list").eq(0).append(data);
}
$(".list").eq(0).show();
break;
}
else{
$(".list").eq(0).html("").hide();
}
}
});
// 输入框键入回车事件
$(".header-search-input").eq(0).on("keydown",function(e){
if(e.keyCode=="13"){
for(var i in shoesData){
if(this.value==shoesData[i][0].Query){
$(".commodityContainer").html("");
var suggests=shoesData[i][0].Results[0].Suggests;
for(var j in suggests){
var data='<div class="mainCommodity"><div class="shopInfo"><div class="shopMsg"><input type="checkbox" name="shopMsg"id="shopMsg" class="shopMsg-input" autocomplete="off"><labelfor="shopMsg">店铺:<a href="#">'
+suggests[j].shop
+'</a></label></div></div><div class="commodityInfo"><ul><li class="td-chk"><div class="td-inner"><input type="checkbox" name="checkbox" autocomplete="off"></div></li><li class="td-item"><div class="td-inner"><a href="#" class="'
+suggests[j].label
+'"></a><div class="item-info"><div class="item-basis-info"><a href="#">'
+suggests[j].Txt
+'</a></div><div class="item-other-info"><div class="item-other-space"></div><div class="item-other-list"><a href="#" title="支持信用卡支付"><div class="bandCard"></div></a><a href="#" class="sevenDay" title="7天无理由"><div class="sevenDay"></div></a><a href="#" title="消费者保障服务"><div class="guarantee"></div></a></div></div></div></div></li><li class="td-info"><div class="td-info-msg"><p>'
+suggests[j].color
+'</p><p>'
+suggests[j].size
+'</p></div></li><li class="td-price"><div class="td-inner"><p class="non-discount">'
+suggests[j].nonDiscount
+'</p><p class="discount">¥<span>'
+suggests[j].num
+'</span></p><div class="promotion">卖家促销<i class="promotionIcon"></i></div><div class="proSlidedown"><p class="newPro">卖家促销:新品大特价</p><p>优惠:¥30.00</p></div></div></li><li class="td-amount"><div class="item-amount"><a href="#" class="amount-leftamount-color">-</a><input type="text" name="amountNum"value="1" autocomplete="off"><a href="#" class="amount-right">+</a></div><div class="stock">574</div><div class="outNum"><span class="instr">最多只能购买</span><span class="stockNum"></span><!----><em>件</em></div></li><li class="td-sum"><em>¥</em><!----><span>'
+suggests[j].num
+'</span></li><li class="td-operation"><p><a href="#" class="delete">删除</a></p></li></ul></div></div>';
$(".commodityContainer").append(data);
}
break;
}
else{
$(".commodityContainer").html(content);
}
}
}
})
})();
正在回答
同学你好,是执行send()才开始请求的。
如果同学对这块内容不理解的话,建议去看一下视频,了解一下。
如果帮助到了你,欢迎采纳~祝学习愉快~
同学你好,默认设置下,所有请求均为异步请求。如果需要发送同步请求,要把async设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行(用户体验不好,所以一般都是使用异步的方式)。
Ajax请求有两种方式,GET和POST,同学可以去看一下视频,复习一下知识:https://class.imooc.com/course/800
项目作业完成之后,可以上传作业,批复作业的老师会针对同学上传的作业给出详细的指导和修改建议
如果帮助到了你,欢迎采纳~祝学习愉快~
相似问题
登录后可查看更多问答,登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星