TIL/academy

국비 TIL(Today I Learned) 20220524 ajax, mysql

토희 2022. 5. 24. 21:52
728x90

AJAX(Asynchronous JavaScript And XML) - 페이지가 로드된 이후에 필요한 부분만 데이터 통신, 예시) 검색창에 검색시 자동완성 뜨는거, 뒷화면은 그대로

https://www.w3schools.com/ 사이트의 ajax 설명 봐봐개발자의 꿈이래ㅎㅎㅎㅎ

* 페이지 로드된 후 웹서버로부터 데이터를 읽을수있다.
* 페이지 재로딩 없이 웹페이지 업데이트 할수있다.
* 배경으로 웹서버에 데이터를 보낼수있다.

onload, open, send

자바스크트립로 ajax, post방식으로 불러오기는 어렵, 그래서 제이쿼리를 많이 씀
ajax는 was없이 할수 없음, 톰캣 같은 서버 있어야함!


예전 버전은 이렇게 썼는데, 지금은 onload로 변경됨,
raadyState의 의미는 참고 바람
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=shdlsdo&logNo=220590134013

httpRequest.readyState==4 란 무엇인가?

httpRequest.status==200 * onreadyStateChange에 등록된 callback 함수는 readyState라는 프로퍼티의 ...

blog.naver.com



JSON.parse
https://www.w3schools.com/js/js_json_parse.asp

JSON.parse()

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com


제이쿼리 ajax 애기하면서 엑시오스도 애기 이런게 있다
https://joshua1988.github.io/vue-camp/vue/axios.html#%E1%84%8B%E1%85%A2%E1%86%A8%E1%84%89%E1%85%B5%E1%84%8B%E1%85%A9%E1%84%89%E1%85%B3-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5

Axios | Cracking Vue.js

액시오스 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양

joshua1988.github.io

제이쿼리 ajax로 데이터 받는 기본 구조

이 블로그도 참고해봐

https://dion-ko.tistory.com/59

[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단)

안녕하세요. 오늘은 제이쿼리 AJAX에 대해서 설명드리겠습니다. - AJAX란? Ajax란 (asynchronous Javascript and XML)의 줄임말 입니다. 자바스크립트를 이용하여 비동기 식으로 서버와 통신을 합니다. 비동기

dion-ko.tistory.com


테이블에 데이터추가, table1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 부트스트랩 cdn으로 사용, table_data.jsp에서 배열 데이터 가져오기 -->
<div class="container mt-3">
  <h2>게시판</h2>
  <p>공지사항 확인바랍니다.</p>            
  <table class="table table-striped" id="mytable">
  	<colgroup>
  		<col width="8%" />
  		<col width="12%" />
  		<col width="*" />
  		<col width="12%" />
  		<col width="12%" />
  	<colgroup>
    <thead>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>내용</th>
        <th>작성자</th>
        <th>작성일</th>
      </tr>
    </thead>
    <tbody>
     
    </tbody>
  </table>
</div>

</body>
</html>
<script>
	$(()=>{
		$.ajax({
			url: "table_data.jsp",
			dataType: "json"
		})
		.done((data)=>{
			console.log(data);
			data.forEach((n)=>{      //data가 한번씩만 옴
				var temp = "<tr>";
					temp = temp + "<td>" + n.id + "</td>";
					temp = temp + "<td>" + n.title + "</td>";
					temp = temp + "<td>" + n.contents + "</td>";
					temp = temp + "<td>" + n.writer + "</td>";
					temp = temp + "<td>" + n.date + "</td>";
					temp = temp + "</tr>";
				console.log(temp);
				$("#mytable > tbody:last").append(temp);
			})
		})
		.fail((jqXHR, textStatus)=>{
			console.log(jqXHR, textStatus);
		})
	})
	
	
</script>

table_data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
[
	{"id":"1", "title":"제목1","contents":"내용1","writer":"홍길동","date":"2022-05-24"},
	{"id":"2", "title":"제목2","contents":"내용2","writer":"김길동","date":"2022-05-25"},
	{"id":"3", "title":"제목3","contents":"내용3","writer":"유재석","date":"2022-05-23"},
	{"id":"4", "title":"제목4","contents":"내용4","writer":"도우너","date":"2022-05-20"},
	{"id":"5", "title":"제목5","contents":"내용5","writer":"마이콜","date":"2022-05-10"},
	{"id":"6", "title":"제목6","contents":"내용6","writer":"희동","date":"2022-05-12"},
	{"id":"7", "title":"제목7","contents":"내용7","writer":"둘리","date":"2022-05-08"},
	{"id":"8", "title":"제목8","contents":"내용8","writer":"네티","date":"2022-05-01"},
	{"id":"9", "title":"제목9","contents":"내용9","writer":"피카츄","date":"2022-04-24"},
	{"id":"10", "title":"제목10","contents":"내용10","writer":"파이리","date":"2022-03-28"}
	
]



MySQL

오라클이랑 상관없이, mysql이 있었음, 오라클은 비싸, mysql이 쌌는데, 오라클에 팔리고, mysql에 있는 사람들이 마리아DB를 만듬
https://downloads.mariadb.com/MariaDB/mariadb-10.0/winx64-packages/

MariaDB/mariadb-10.0/winx64-packages/ - MariaDB

downloads.mariadb.com

우리는 zip으로 받음, zip라서 bin 설정해줘야 한데
mysql_install_db --datadir=C:\mariadb\data --service=mariaDBZip --port=3306 --password=
password 뒤에는 비번 아무거나

마우스 오른쪽 클릭 시작 누르면 실행중으로 변경, 그리고 환경변수 설정해주고

그리고 실행 명령어(mysql -u root -p) 하고 비번 누르면 위처럼 뜸, 그러면 된데

계정주기

이렇게 하면 불편하니까
https://www.heidisql.com/download.php?download=installer 다운, 단 window에서만 됨, 맥 안됨

Download HeidiSQL

Ads were blocked - no problem. But keep in mind that developing HeidiSQL, user support and hosting takes time and money. You may want to send a donation instead. Download HeidiSQL 12.0, released on 12 Apr 2022 Please disable your adblocker and reload the p

www.heidisql.com

신규하고 우리 했던 사용자랑, 암호 넣고 열기

이렇게 화면 나옴




오늘꺼 깃헙에 올리려다가 오류나고,,
강사님이 프로젝트를 어제랑 따로 만들어서 해가지고, 새 프로젝트를 어제 올린 깃헙 주소에 같이 올릴려다가 충돌나서, 다 삭제되고..
결국 프로젝트는 하나로 묶었는데, 변경사항 체크가 안되서 밑에 처럼 하고, 다시 commit함

https://velog.io/@soyeon/JAVAEclipse-GitHub-Push-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-rejected-non-fast-forward

[JAVA/Eclipse] GitHub Push 오류 해결 (rejected - non-fast-forward)

.

velog.io


깃헙주소

https://github.com/saehee15/aca_java/tree/main/project2/src/main/webapp/ajaxTest

이건 어제 프로젝트에 폴더로 넣은거

GitHub - saehee15/aca_java

Contribute to saehee15/aca_java development by creating an account on GitHub.

github.com

아 뭐여 새로운 프로젝트 충돌났던거 같이 올라가졌네?
https://github.com/saehee15/aca_java/tree/main/AjaxTest
이건 새로 프로젝트 만든거..

GitHub - saehee15/aca_java

Contribute to saehee15/aca_java development by creating an account on GitHub.

github.com


혼란하다 혼란해, 왠 갑자기 sql까지 나가지


9:35pm
집에 와서 오늘 했던 게시판 코딩을 좀 리팩토링 해봤는데, (기존 table1.jsp, table_data.jsp)
1. 작성일 기준으로 정렬

data.sort((a, b) => new Date(b.date) - new Date(a.date))

2. 그에 따라 아이디 번호 새로 매기기

for(i=0; i< data.length; i++){
data[i].id = i+1;
}

이 방식은 json 객체 배열에 id를 다시 준건데, 근데 코드내에서 순서가 이상한건지 뭔지, 처음 인덱스(원래 for문 안 넣으면 처음 나오는데 인덱스)에는 안 먹어서, 배열 자체에 id를 다 1로 넣은다음, 그 다음에 2부터 출력되게 꼼수 부림

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 부트스트랩 cdn으로 사용, table_data.jsp에서 배열 데이터 가져오기 -->
<div class="container mt-3">
  <h2>게시판</h2>
  <p>공지사항 확인바랍니다.</p>            
  <table class="table table-striped" id="mytable">
  	<colgroup>
  		<col width="8%" />
  		<col width="12%" />
  		<col width="*" />
  		<col width="12%" />
  		
  		<col width="12%" />
  	<colgroup>
    <thead>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>내용</th>
        <th>작성자</th>
        <th>작성일</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

</body>
</html>

<script>
	$(()=>{
		$.ajax({
			url: "table_data.jsp",
			dataType: "json"
		})
		.done((data)=>{
			console.log(data);
			data.sort((a, b) => new Date(b.date) - new Date(a.date)) // date기준으로 sort
				
				.forEach((n)=>{ 
						var temp = "<tr>";
						temp = temp + "<td>" + n.id + "</td>";
						temp = temp + "<td>" + n.title + "</td>";
						temp = temp + "<td>" + n.contents + "</td>";
						temp = temp + "<td>" + n.writer + "</td>";
						temp = temp + "<td>" + n.date + "</td>";
						temp = temp + "</tr>";
						for(i=0; i< data.length; i++){
							data[i].id = i+1;
						} // id에 숫자 넣기
						console.log(temp);
					$("#mytable > tbody:last").append(temp);
					
			})
		})
		.fail((jqXHR, textStatus)=>{
			console.log(jqXHR, textStatus);
		})
	})	
</script>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
[
	{"id":"1", "title":"제목","contents":"내용","writer":"홍길동","date":"2022-05-24"},
	{"id":"1", "title":"제목","contents":"내용","writer":"김길동","date":"2021-08-30"},
	{"id":"1", "title":"제목","contents":"내용","writer":"유재석","date":"2022-05-23"},
	{"id":"1", "title":"제목","contents":"내용","writer":"도우너","date":"2021-05-20"},
	{"id":"1", "title":"제목","contents":"내용","writer":"마이콜","date":"2022-05-10"},
	{"id":"1", "title":"제목","contents":"내용","writer":"희동","date":"2022-05-12"},
	{"id":"1", "title":"제목","contents":"내용","writer":"둘리","date":"2021-12-08"},
	{"id":"1", "title":"제목","contents":"내용","writer":"네티","date":"2022-05-01"},
	{"id":"1", "title":"제목","contents":"내용","writer":"피카츄","date":"2022-04-24"},
	{"id":"1", "title":"제목","contents":"내용","writer":"파이리","date":"2022-03-28"}
	
]

결과값, 아래와 같이 정렬됨

참고

1. 날짜 순으로 배열 안의 객체를 정렬하는 방법

https://dkmqflx.github.io/frontend/2021/04/21/javascript-sortbydate/

날짜 순으로 배열 안의 객체를 정렬하는 방법

날짜 순으로 배열안의 객체를 정렬하는 방법에 대해 정리한 글입니다.

dkmqflx.github.io

2. JSON 객체 배열 사용하기

https://www.delftstack.com/ko/howto/javascript/javascript-json-array-of-objects/

JavaScript에서 JSON 객체 배열 사용하기

이 튜토리얼에서는 JSON 객체 배열에 대해 설명합니다.

www.delftstack.com


728x90

'TIL > academy' 카테고리의 다른 글

국비 TIL(Today I Learned) 20220526 mariaDB join, 서브쿼리  (0) 2022.05.26
국비 TIL(Today I Learned) 20220525 mysql 쿼리문, mariaDB  (0) 2022.05.25
국비 TIL(Today I Learned) 20220523 setAttribute/ getAttribute / getparameternames  (0) 2022.05.23
국비 TIL(Today I Learned) 20220520 서블릿, jsp 파일 만들어서 연습  (0) 2022.05.20
국비 TIL(Today I Learned) 20220519 자바, 톰캣, 이클립스 설치, 설정  (0) 2022.05.19

'TIL/academy'의 다른글

  • 현재글국비 TIL(Today I Learned) 20220524 ajax, mysql

관련글

댓글

티스토리툴바