• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Node.js, Express 게시판 검색기능 fetch로 기능 만들다가 안되네요..

검색기능 fetch로 기능 만들다가 안되네요..

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #112051

    권상웅
    참가자
    검색기능 fetch로 기능 만들다가 안되네요..
    
    server.js------------------------------------------------
    app.get('/search', async (요청, 응답) => {
      let result = await db.collection('post').find().toArray();
      let 찾은거 = await result.filter((a, i) => {
        return a.title == 요청.query.value;
      });
      console.log(찾은거);
      if (찾은거.length > 0) {
        응답.render('search.ejs', { 글목록: 찾은거 });
      }
    });
    
    
    search.ejs---------------------------------------------------------------------
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/main.css" />
      </head>
      <body class="grey-bg">
        <%- include('nav.ejs') %>
        <div class="serach-box" style="margin-top: 20px">
          <input class="search" /> <button class="search-send">검색</button>
        </div>
        <script>
          let search = document.querySelector('.search');
          let send = document.querySelector('.search-send');
          send.addEventListener('click', function () {
            // location.href = `/search?value=${search.value}`;
            fetch(`/search?value=${search.value}`, {
              method: 'GET', // GET 메소드로 수정
            })
              .then(res => res.json())
              .then(res => {
                document.querySelector('.white-bg').innerHTML = '';
                res.forEach((a, i) => {
                  document.querySelector(
                    '.white-bg'
                  ).innerHTML = `<div class="list-box">
            <h4>
              <a
                href="/detail/${a._id}"
                style="text-decoration: none; color: black"
                >${a.title}</a 
              >
              <a href="/edit/${a._id}" style="text-decoration: none"> ✏️</a>
              <span class="delete" data-id="${a._id}">🗑️</span>
            </h4>
            <p>${a.content}</p>
          </div>`;
                });
              });
          });
        </script>
        <h4 style="margin-left: 20px">검색결과</h4>
        <div class="white-bg">
          <% 글목록.forEach((a, i)=>{ %>
          <div class="list-box">
            <h4>
              <a
                href="/detail/<%= a._id%>"
                style="text-decoration: none; color: black"
                ><%=a.title%></a
              >
              " style="text-decoration: none"> ✏️
              <span class="delete" data-id="<%=글목록[i]._id%>">🗑️</span>
            </h4>
            <p><%=a.content%></p>
          </div>
          <%}) %>
        </div>
        " style="margin-left: 20px">이전
        ">다음
        <script>
          let 없애기 = document.querySelectorAll('.delete');
          let 없어질친구 = document.querySelectorAll('.list-box');
          for (let i = 0; i < 없애기.length; i++) {
            없애기[i].addEventListener('click', function (e) {
              fetch(`/delete?docid=${e.target.dataset.id}`, {
                method: 'DELETE',
              })
                .then(result => result.text())
                .then(result => {
                  없애기[i].parentElement.parentElement.parentElement.removeChild(
                    없어질친구[i]
                  );
                });
            });
          }
        </script>
      </body>
    </html>
    
    list.ejs--------------------------------------------------------------------------------
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/main.css" />
      </head>
      <body class="grey-bg">
        <%- include('nav.ejs') %>
        <div class="serach-box" style="margin-top: 20px">
          <input class="search" /> <button class="search-send">검색</button>
        </div>
        <script>
          let search = document.querySelector('.search');
          let send = document.querySelector('.search-send');
          send.addEventListener('click', () => {
            // location.href = `/search?value=${search.value}`;
            fetch(`/search?value=${search.value}`, {
              method: 'GET', // GET 메소드로 수정
            })
              .then(res => res.json())
              .then(res => {
                document.querySelector('.white-bg').innerHTML = '';
                res.forEach((a, i) => {
                  document.querySelector(
                    '.white-bg'
                  ).innerHTML = `<div class="list-box">
            <h4>
              <a
                href="/detail/${a._id}"
                style="text-decoration: none; color: black"
                >${a.title}</a 
              >
              <a href="/edit/${a._id}" style="text-decoration: none"> ✏️</a>
              <span class="delete" data-id="${a._id}">🗑️</span>
            </h4>
            <p>${a.content}</p>
          </div>`;
                });
              });
          });
        </script>
        <div class="white-bg">
          <% 글목록.forEach((a, i)=>{ %>
          <div class="list-box">
            <h4>
              <a
                href="/detail/<%= a._id%>"
                style="text-decoration: none; color: black"
                ><%=a.title%></a
              >
              " style="text-decoration: none"> ✏️
              <span class="delete" data-id="<%=글목록[i]._id%>">🗑️</span>
            </h4>
            <p><%=a.content%></p>
          </div>
          <%}) %>
        </div>
        " style="margin-left: 20px">이전
        ">다음
        <script>
          let 없애기 = document.querySelectorAll('.delete');
          let 없어질친구 = document.querySelectorAll('.list-box');
          for (let i = 0; i < 없애기.length; i++) {
            없애기[i].addEventListener('click', function (e) {
              fetch(`/delete?docid=${e.target.dataset.id}`, {
                method: 'DELETE',
              })
                .then(result => result.text())
                .then(result => {
                  없애기[i].parentElement.parentElement.parentElement.removeChild(
                    없어질친구[i]
                  );
                });
            });
          }
        </script>
      </body>
    </html>
     
     
    white-bg를 없앤다음에 res를 넣는 식으로 해보았는데 안되어서 여쭤봅니다..
    어떤게 문제가 있을까요? 
    어떤것 때문에 안되는지 너무 답답하네요,,
     
    #112093

    codingapple
    키 마스터
    fetch로 데이터가져오려면 서버에서 ejs 파일말고 데이터만 보내줘야 받아올 수 있습니다
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠