-
오류메세지 Uncaught TypeError: $.ajax is not a function 뜹니다.
구글링해보니 slim 버전사용해서 그렇다고 합니다.
slim 빼고 / 서버, vscode, 컴퓨터 껐다 켜봐도 똑같습니다.
다른 강의 들을때도 ajax가 이상하게 잘 안먹어서 고생했는데 (결국못함)
요즘 제이쿼리 안쓰는 추세라고 하니 이번에도 안되면 제이쿼리 평생 쓸일 없을것 같습니당.
하단에 코드 첨부했는데 보시고 답변해 주시면 감사하겠습니다.
server.js ---------------------------------------------------------------------------------------------------------------
const express = require("express");
const app = express();// mongoDB Atlas 서비스 연결하기
// 이것도 npm 설치해야 함 -> npm install mongodb
const MongoClient = require("mongodb").MongoClient;//데이터를 html에 쉽게 보여주는 ejs 설치 및 import -> npm install ejs
app.set("view engine", "ejs");//데이터를 담을 변수를 선언
var db;//mongoDB 연결해라라는 함수 : url 값은 site에서 복사했고 id, password 잘 입력하자
MongoClient.connect(
"mongodb+srv://pp11:@cluster0.tjmpn.mongodb.net/todoapp?retryWrites=true&w=majority",
(error, client) => {
//오류가 났을 때 아래의 코드를 실행해라. 조건이 1개이기 떄문에 간단하게 1줄로 작성
if (error) return console.log(error);
//mongoDB에 생성한 database가 'todoapp'임
db = client.db("todoapp");
var inputData = {};
app.post("/add", (req, res) => {
res.send("complete");
//postCounter라는 이름을 가진 db를 찾으시오
db.collection("counter").findOne({ name: "postCounter" }, (err, rst) => {
console.log(rst.totalPost);
var postCounter = rst.totalPost;
inputData = {
_id: postCounter,
title: req.body.title,
date: req.body.date,
};
db.collection("post").insertOne(inputData, (err, res) => {
console.log("저장완료");
db.collection("counter").updateOne(
{ name: "postCounter" },
{ $inc: { totalPost: 1 } },
(err, rst) => {
if (err) {
return console.log(err);
}
}
);
});
});
});//데이터를 저장할 때는 object 자료형으로 저장할 것
// db.collection("post").insertOne(inputData, (err, res) => {
// console.log("저장완료");
// });//오류 안났으면 8080포트로 연결하고 console.log 띄워라
app.listen("8080", function () {
console.log("listening on 8080");
});
}
);app.use(express.urlencoded({ extended: true }));
// GET요청 하는 법
// app.get(포트or주소, function(요청req,응답res){
// 응답.send('펫용품 쇼핑할 수 있는 페이지입니다.')
// });app.get("/pet", function (req, res) {
res.send("펫용품 쇼핑할 수 있는 페이지입니다.");
});// homework-1
app.get("beauty", function (req, res) {
res.send("뷰티용품 쇼핑할 수 있는 페이지입니다.");
});//html 불러오는 방법
//sendFile()은 파일을 보낼 수 있는 함수
//__dirname은 현재파일의 경로를 뜻함app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});// homework-2
app.get("/write", function (req, res) {
res.sendFile(__dirname + "/write.html");
});//누군가 /add 경로로 POST 요청을 하면 ~를 해주세요.
//homework-3// app.post("/add", (req, res) => {
// console.log(req.body);
// res.send("complete");
// });// ejs 문서를 보내주는 법
app.get("/list", (req, res) => {
//database에 저장된 post라는 collection 안의 어떤 데이터를 꺼내주세요.
db.collection("post")
.find()
.toArray((err, rst) => {
console.log(rst);
res.render("list.ejs", { cardList: rst });
});
});// app.delete("/delete", (req, res) => {
// console.log(req.body);
// req.body._id = parseInt(req.body._id);
// db.collection("post").deleteOne(req.body, (error, rst) => {
// if (error) return console.log(error);
// });
// res.send("삭제완료");
// });app.delete("/delete", function (요청, 응답) {
요청.body._id = parseInt(요청.body._id);
db.collection("post").deleteOne(요청.body, function (에러, 결과) {
console.log("삭제완료");
});
응답.send("삭제완료");
});list.ejs ---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/><!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
/><title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/write">Write</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true"
>Disabled</a
>
</li>
</ul>
</div>
</nav>
<!-- ejs 파일은 항상 views 라는 파일을 만들어서 보관해야지 오류가 뜨지 않는다 -->
<!-- ejs에서 서버 데이터를 가져올 경우 아래 코딩을 통해 값을 불러옴 -->
<div class="container">
<div class="low">
<h2 style="display: flex; justify-content: center; margin: 20px">
To do list
</h2>
<% for(var i = 0; i < cardList.length; i++){ %>
<div class="card border-dark" style="margin: 1vh">
<div
class="card-body"
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<p>글번호: <%= cardList[i]._id %></p>
<h4 class="card-title" style="margin: 0">
<%= cardList[i].title %>
</h4>
<p style="margin: 0"><%= cardList[i].date %></p>
<button class="delete" data-id="<%= cardList[i]._id %>">
삭제
</button>
</div>
</div>
<% }; %>
</div>
</div><script
src="https://code.jquery.com/jquery-3.6.0.js"
type="text/javascript"
></script><script>
//삭제 버튼이 클릭 되었을 때 삭제 버튼에 숨겨 두었던 해당 id 값을 가진 data id 값을 서버에 보내줌
// $(".del").click((e) => {
// console.log(e);
// $.ajax({
// method: "DELETE",
// url: "/delete",
// data: { _id: e.target.dataset.id },
// }).done(function (error, rst) {
// if (error) return console.log(error);
// });
// });
$(".delete").click(function (e) {
$.ajax({
method: "DELETE",
url: "/delete",
data: { _id: e.target.dataset.id },
}).done(function (결과) {
//AJAX 성공시 실행할 코드는 여기
});
});
</script><!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script><!-- Option 2: Separate Popper and Bootstrap JS -->
<!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>오류메세지 ------------------------------------------------------------------------------------------------------
- 답변은 로그인 후 가능합니다.