AJAX JQuery 질문 있습니다.

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

글쓴이

글
2021년 6월 3일 13:49 #10038

설재호
참가자

Ajax 요청이 안됩니다..

콘솔창에 {_id : '1'}이 뜨지 않습니다.

JQuery가 실행되지 않아서 문제가 생기는 것 같습니다.

list.ejs 파일:

<!doctype html>
<html>
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Todo App</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/write">Write</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">임시</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

    <ul class="list-group">
        <% for (var i = 0; i < posts.length; i++){ %>
        <li class="list-group-item">
            <h4 class="ml-2 my-3">할일 제목 : <%= posts[i].제목 %></h4>
            <p>할일 마감 날짜 : <%= posts[i].날짜 %></p>
            <button type="button" class="btn btn-danger">삭제</button>
        </li>
        <% } %>
    </ul>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $.ajax({
          type : 'DELETE',
          url : '/delete',
          data : {_id : 1}
        }).done(function(결과){
        });
      </script>


      

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    
    
  </body>
</html>

server.js 파일 :

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended : true}));
const MongoClient = require('mongodb').MongoClient;
app.set('view engine','ejs');

var db;
MongoClient.connect('mongodb+srv://@@cluster0.1jb0d.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',function(에러,client){
    app.listen(8070, function(){
        if(에러) return console.log(에러)
        db = client.db('todoapp');

        console.log('listening on 8070')
    });
})

// app.listen(8070, function(){
//     console.log('listening on 8070')
// });

app.get('/',function(요청,응답){
    응답.sendFile(__dirname + '/index.html')
});

app.get('/write',function(요청,응답){
    응답.sendFile(__dirname + '/write.html')
});

app.post('/add', function(요청, 응답){
    db.collection('counter').findOne({name : '게시물갯수'}, function(에러, 결과){
        var 총게시물갯수 = 결과.totalPost;
        db.collection('post').insertOne({_id : 총게시물갯수+1, 제목 : 요청.body.title , 날짜 : 요청.body.date},function(에러,결과){
            console.log('저장완료');
            db.collection('counter').updateOne({name : '게시물갯수'},{$inc : {totalPost :1}},function(에러, 결과){
                if(에러){return console.log(에러)};
            })
        });

    });
  });

app.get('/list',function(요청,응답){
    db.collection('post').find().toArray(function(에러,결과){
        console.log(결과);
        응답.render('list.ejs', { posts : 결과});
    });
});

app.delete('/delete', function(요청, 응답){
    console.log(요청.body)
  });

index.html 파일을

<!doctype html>
<html>
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Todo App</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/write">Write</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">임시</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <script src="node_modules/jquery/dist/jquery.min.js"></script>
      <p>you?</p>
      <button>CC</button>
      <script>

          $('button').click(function () {
            $('p').remove();
          });


      </script>

      <h4>홈입니다.</h4>
    

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    
    
  </body>
</html>

이렇게 만들고 크롬으로 index.html 파일을 실행시키면 JQuery로 만든 버튼이 잘 동작하는데 로컬호스트로 들어가면 jQuery로 만든 버튼이 작동하지 않습니다..

어떻게 하면 좋을까요..

2021년 6월 3일 16:03 #10042

codingapple
키 마스터

브라우저 콘솔창에 어떤 에러가 뜨나요

2021년 6월 3일 16:43 #10048

설재호
참가자

1. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
이렇게 하면 아무 에러메세지도 뜨지 않습니다.. (그런데 동작도 하지 않습니다..)

2.     <script src="/resource/jquery-3.5.1.min.js"></script> (resource 폴더에 jquery-3.5.1.min.js파일을 저장해두었습니다)

또는

    <script src="node_modules/jquery/dist/jquery.min.js"></script> (npm으로 설치하였습니다)

이렇게 하면
GET http://localhost:8070/resource/jquery-3.5.1.min.js net::ERR_ABORTED 404 (Not Found)
list:49 Uncaught ReferenceError: $ is not defined
at list:49

list:47 GET http://localhost:8070/node_modules/jquery/dist/jquery.min.js net::ERR_ABORTED 404 (Not Found)
list:49 Uncaught ReferenceError: $ is not defined
at list:49

위의 오류메세지가 뜹니다.

2021년 6월 3일 17:17 #10050

설재호
참가자

해결했습니다!

server.js에

const path = require('path');

app.use('/node_modules', express.static(path.join(__dirname,'/node_modules')));를 추가하고

npm으로 사용하니 되네요!

2021년 6월 3일 17:35 #10054

codingapple
키 마스터

$ is not defined는 jQuery 설치가 안되었다는 뜻인데

보통 jquery css 이런 파일들은 public 폴더에 보관하시고 html파일 안에서 /public/jquery.js 이런 식으로 가져와서 씁니다.

아니면 넴 app.use 그거해서 새로운 폴더를 등록하셔도 되고요 근데 node modules 폴더는 등록하시면 안됩니다 public이나 만드셨던 resource나 다른 폴더를 씁시다
글쓴이

글

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png