할 일이 없어서 전자상거래 사이트를 검색하던 중 우연히 친구가 어떤 보물상점을 오픈하고 있는데, 눈부시게 다양한 상품 카테고리를 보고 정말 기뻤습니다. 그래서 조금 조사를 해봤습니다.
상품 카테고리 가져오기는 모두 AJAX로 하고, 로그인도 해야 하기 때문에 문제가 없어서 가장 간단한 방법으로 백그라운드로 가서 바로 콘솔을 열고 코드를 붙여넣고 실행하면, ㅎㅎ, 모든 카테고리는 데이터에서 CAT으로 실행됩니다.
연습하는 초보님들 조언 부탁드립니다.
var CAT = { //[{id: '', name: '', data: [{id: '', name: '', data:[{id: '', name: ''}]},{}, ...]}, {} ...] data: [], url: function(){ return 'http://upload.taobao.com/auction/json/reload_cats.htm?t='+Math.random(); }, init: function(){ var url = CAT.url(), post_data = 'path=all'; CAT.ajax(url, post_data, CAT.first_r); }, first_r: function(data){ var rs = data[0]['data'], first_l, first_d, i, j, second_id, second_d, func; for(i=0;i<rs.length; i++){ //保存一级分类 first_d = rs[i]['data']; first_l = []; for(j=0; j<first_d.length; j++){ //保存二级分类同时查询三级分类,并提供存储数据的容器 second_id = first_d[j]['sid']; second_d = { 'id': first_d[j]['sid'], 'name': first_d[j]['name'], 'spell': first_d[j]['spell'], 'data': [] }; first_l.push(second_d); func = CAT.second_r(second_d['data']); CAT.ajax(CAT.url(), 'path=next&sid='+second_id, func); } CAT.data.push({ 'id': rs[i]['id'], 'name': rs[i]['name'], 'data': first_l }) } }, second_r: function(container){ return function(data){ if(data.length<1){ return } var rs = data[0]['data'], i, j, here, third_d; for(i=0; i<rs.length; i++){ third_d = rs[i]['data']; for(j=0; j<third_d.length; j++){ here = third_d[j]; container.push({ 'id': here['sid'], 'name': here['name'], 'spell': here['spell'] }); } } } }, ajax: function(url, post_data, func){ var xhr = new XMLHttpRequest(), result; xhr.open('POST', url, true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(post_data); xhr.onreadystatechange=function(){ if (xhr.readyState==4 && xhr.status==200){ result = JSON.parse(xhr.responseText); func(result); }else if(xhr.readyState==4 && (!xhr.status==200)){ console.log('Ajax Return Error!'); } } } }; CAT.init();
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.