4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 9월 6일 08:57 #97056
칼있으마참가자안녕하십니까? 선생님 항상 감사한 마음으로 강의를 듣고 있는 수강생입니다^^;;
Ajax를 이용해서 Get 요청시 랜더링 요청한 곳으로 가지 않고 다른 곳으로 리다이랙션 됩니다. 무언가 제가 잘못 구성하여 그런것 같은데 혹시 이유를 알 수 있을 까요? 해당 소스는 아래와 같습니다. List.ejs 중략... <div class="container"> <!-- aria-current="true" --> <div class="list-group"> <% for (let i = 0 ; i < people.length ; i++) { %> " class="list-group-item list-group-item-action"> <P>글번호 : <%= people[i]._id %> </P> <h4>이름 : <%= people[i].name %> </h4> <P>기관 : <%= people[i].institution %> </P> <P>평가 횟수 : <%= people[i].counter %> </P> <button class="btn btn-info put" data-id="<%= people[i]._id %>">평가내용</button> <button class="btn btn-danger delete" data-id="<%= people[i]._id %>">삭제</button> <!-- <button class="btn btn-danger chat" data-id="<%= people[i]._id %>" data-id-user="<%= people[i].작성자 %>">채팅하기</button> --> <% } %> </div> </div> ... 중략 ...$('.put').click(function(e){ var 임시글번호 = e.target.dataset.id; var 임시유알엘 = '/chart/' + 임시글번호;$.ajax({ method : 'GET', url : 임시유알엘, data : {_id : 임시글번호 }, }).done(function(결과){ // 페이지를 강제로 새로고침해주세요 //alert('수정 페이지를 잘띄웠다고 서버에서 응답이 왔어요'); }).fail(function(xhr, textStatus, errorThrown){ console.log(xhr, textStatus, errorThrown); }); }); 위의 소스에서와 같이 List.ejs에서 [평가 내용]을 누르면 Ajax를 이용해서 Get 요청을 합니다. (사실 버튼을 여러개를 두고싶은데 Form에 Action을 여러개 설정하는 방법을 모릅니다 ㅠ) (저 경우 [리스트 클릭]과, [평가내용], [삭제]를 사용하고 있습니다만. 다른 방식으로는 Action을 추가하지 못해서 Ajax로... ㅠㅠ) 그렇게 평가 내용을 누르면 Server.js 에서는 다음과 같이 처리합니다. ... (정상 적인 console.log를 굵고 기울게 표현하였습니다)app.get('/chart/:id', function(요청, 응답) { var id = parseInt(요청.params.id); console.log('챠트/:id로 들어왔음-original'); // DB의 data를 가져와서 해당 항목1,2,3,4,5와, 데이터1에 실제 값을 입력할것 Evaluate_Answer.find({people_id : id}).toArray(function(에러, 피플파인드결과){ if (에러) return 응답.status(400).send({message : '실패했습니다.'}); // 2XX : 요청 성공, 4XX : 잘못된 요청으로 실패, 5XX : 서버의 문제 if (!피플파인드결과) { console.log('피플파인드결과가 없습니다');return 응답.send("<script>alert('피플 파인드 결과가 없습니다.'); location.href = document.referrer; </script>"); }console.log('챠트/:id로 들어왔음-피플파인드 성공');var 평가합계 = [ {$match : { people_id : id}}, {$group : { _id : id, "name": { "$first": "$people_name" }, TOT_SL_WSL : { $sum : '$SL_WSL'}, TOT_SL_DBPL: { $sum : '$SL_DBPL'}, TOT_SL_WDPL: { $sum : '$SL_WDPL'}, TOT_SL_PRPL: { $sum : '$SL_PRPL'}, TOT_SL_DNL : { $sum : '$SL_DNL'}, TOT_CR_AAP : { $sum : '$CR_AAP'}, TOT_CR_DPC : { $sum : '$CR_DPC'}, TOT_CR_DVC : { $sum : '$CR_DVC'}, TOT_CR_RPD : { $sum : '$CR_RPD'}, TOT_SC_ECM : { $sum : '$SC_ECM'}, TOT_SC_MDR : { $sum : '$SC_MDR'}, TOT_SC_TMM : { $sum : '$SC_TMM'}, TOT_SC_HLM : { $sum : '$SC_HLM'}, TOT_PF_CSA : { $sum : '$PF_CSA'}, TOT_PF_OBJ : { $sum : '$PF_OBJ'}, TOT_PF_RTN : { $sum : '$PF_RTN'}, TOT_PF_UDS : { $sum : '$PF_UDS'}, TOT_PF_DCM : { $sum : '$PF_DCM'}, TOT_PF_CRT : { $sum : '$PF_CRT'}, TOT_PF_LDS : { $sum : '$PF_LDS'}, TOT_RS_RPA : { $sum : '$RS_RPA'}, TOT_RS_RFP : { $sum : '$RS_RFP'}, TOT_RS_RCR : { $sum : '$RS_RCR'}, TOT_RS_RAP : { $sum : '$RS_RAP'} }} ];Evaluate_Answer.aggregate(평가합계).toArray(function (에러1, 결과) { if (에러1) { return 응답.status(400).send({message : '실패했습니다.'}); // 2XX : 요청 성공, 4XX : 잘못된 요청으로 실패, 5XX : 서버의 문제 } let SumObj = 결과[0]; console.log('결과.name : ', SumObj.name);// 항목을 자동으로 구분해 내는 로직이 필요하다!!!! - 지금은 하드코딩으로 ..... let SL = (SumObj.SL_DBPL + SumObj.SL_DNL + SumObj.SL_PRPL + SumObj.SL_WSL + SumObj.SL_WDPL) / 5; let CR = (SumObj.CR_AAP + SumObj.CR_DPC + SumObj.CR_DVC + SumObj.CR_RPD) / 4; let SC = (SumObj.SC_ECM + SumObj.SC_HLM + SumObj.SC_MDR + SumObj.SC_TMM) / 4; let PF = (SumObj.PF_CRT + SumObj.PF_CSA + SumObj.PF_DCM + SumObj.PF_LDS + SumObj.PF_OBJ + SumObj.PF_RTN + SumObj.PF_UDS) / 7; let RS = (SumObj.RS_RAP + SumObj.RS_RCR + SumObj.RS_RFP + SumObj.RS_RPA) / 4;
console.log('챠트/:id로 들어왔음-데이터 합산 성공');const data = { labels: ['SL', 'CR', 'SC', 'PF', 'RS'], datasets: [ { label: SumObj.name, data: [SL, CR, SC, PF, RS], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, }, // 추가 데이터셋을 필요에 따라 설정할 수 있습니다. ], }; console.log('챠트/:id로 들어왔음-챠트 데이터 만들기 성공!'); 응답.render('chart.ejs', { data }); }); }); });마지막에 저렇게 chart.ejs를 data와 함께 랜더링 하도록 했는데 자꾸만 edit/:id를 Get 요청 하는 곳으로 진입을 합니다. 참고로 edit/:id를 Get 했을 때의 내용은 아래과 같습니다. (정상 적인 console.log를 굵고 기울게 표현하였습니다) app.get('/edit/:id', function(요청, 응답) { var id = parseInt(요청.params.id); console.log('edit/:id로 들어왔음 - original');Evaluate_People.findOne({_id : id}, function(에러, 피플결과){ if (에러) return 응답.status(400).send({message : '실패했습니다.'}); // 2XX : 요청 성공, 4XX : 잘못된 요청으로 실패, 5XX : 서버의 문제 if (!피플결과) { console.log('피플결과가 없습니다');return 응답.status(400).send({message : '피플결과가 없습니다.'}); }var Result = {People : 피플결과};console.log('edit/:id로 들어왔음 - 피플검색완료'); Evaluate_Multiple_Choice.find().toArray(function(에러, 객관식결과){ if (!객관식결과) { console.log('객관식 결과가 없습니다'); 응답.render('edit.ejs', {data : Result}); }Result = { ...Result, MC: 객관식결과 }; console.log('edit/:id로 들어왔음 - 객관식검색완료');Evaluate_Multiple_Choice_Detail.find().toArray(function(에러, 객관식디테일결과){ if (!객관식디테일결과) { console.log('객관식 결과가 없습니다'); // 일단 객관식의 결과만 표시할것 응답.render('edit.ejs', {data : Result}); } Result = { ...Result, MCD: 객관식디테일결과 }; console.log('edit/:id로 들어왔음 - 객관식디테일검색완료'); Evaluate_SubjectiveExpression.find().toArray(function(에러, 주관식결과){ if (!주관식결과) { console.log('주관식 결과가 없습니다'); // 일단 객관식 디테일의 결과만 표시할것 응답.render('edit.ejs', {data : Result}); } Result = { ...Result, SE: 주관식결과 }; console.log('edit/:id로 들어왔음 - 주관식 검색완료'); 응답.render('edit.ejs', {data : Result}); }); }); }); }); });그리고 최종적으로 [평가 내용]을 클릭했을 때 다음과 같이 Console.Log가 찍힙니다. 챠트/:id로 들어왔음-original edit/:id로 들어왔음 - original 챠트/:id로 들어왔음-피플파인드 성공 결과.name : 홍길동 챠트/:id로 들어왔음-데이터 합산 성공 챠트/:id로 들어왔음-챠트 데이터 만들기 성공! edit/:id로 들어왔음 - 피플검색완료 edit/:id로 들어왔음 - 객관식검색완료 edit/:id로 들어왔음 - 객관식디테일검색완료 edit/:id로 들어왔음 - 주관식 검색완료
(마지막에 랜더링 지시한 내용은 듣지도 않고...) 왜 저렇게 왔다 갔다 하는 것일까요?
2023년 9월 6일 09:37 #97061
codingapple키 마스터ajax요청시 응답.render는 이용불가능합니다 ajax성공시 window.location.href = "/페이지" 코드 실행합시다
-
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.