728x90
반응형
💡JQuery
◾ 제이쿼리는 객체를 $로 접근하고 안에 있는 함수에 접근한다. 그리고 파라미터를 넘겨준다.
◾ $(대상).함수(파라미터);
ex) $(document).ready();
ex) $(document).ready(function(){});
◾ Lambda 무명함수, 이름을 안 정해준 함수
◾ 변수처럼 넘겨줄 수 있는 기능도 가지고 있다.
◾ 변수에 함수를 넣어서 사용할 수 있다.
ex) var a = function() {}
◾ js에서는 함수도 파라미터로 줄 수 있다.
💡 html을 간단하게 짤 수 있는 사이트
https://jsbin.com/sufubirolu/edit?html,output
JS Bin
Sample of the bin:
jsbin.com
💁♀️ 추가적으로 웹을 공부하는데 도움되는 사이트
https://www.everdevel.com/editor/macOS.php
everdevel
웹 입문 사이트 everdevel - HTML, CSS, JavaScript, jQuery, ReactJs, MySQL, PHP
www.everdevel.com
◾ alert()함수를 이용하면 경고창을 띄울 수 있다.
◾ 함수를 호출해서 경고창을 띄울 수도 있다.
💡 텍스트 상자를 누를 때마다 alert창이 뜨게 하기
🔸 힌트
$("id값").on("이벤트의 종류", funtion);
💁♀️ js를 이용한 내가 한 방식
📝html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
</head>
<body>
아이디 :
<input type="text" id="user_id" name="user_id" onclick="javascript:buttonClick()">
</body>
</html>📝JavaScript
$(document).ready(function() {
changeValue("Hunter");
});
function displayAlert() {
alert("started");
}
function changeValue(name) {
$("#user_id").val(name);
}
function buttonClick() {
alert("숫자만 입력하세요");
}
💁♀️ JQuery 사용
📝html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
</head>
<body>
아이디 :
<input type="text" id="user_id" name="user_id">
</body>
</html>📝JavaScript
$(document).ready(function() {
changeValue("Hunter");
$("#user_id").on("click", function(){
alert("숫자만 입력하세요");
});
});
function displayAlert() {
alert("started");
}
function changeValue(name) {
$("#user_id").val(name);
}🔸jqXHR 객체
◾ 이 객체를 사용하지 않아도 된다. 다른 객체를 사용해도 된다!
▪️ jqXHR은 브라우저 고유 XMLHttpRequest 객체를 대체한다.
▪️ JQuery 1.5부터 $.ajax()함수가 반환하는 객체이다.
▪️ XMLHttpRequest 객체의 상위집합이다.
▪️ 기존의 XHR 객체에서 처리하던 HTTP 요청 헤더, 타임아웃 등을 처리할 수 있다.
▪️ 요청 콜백도 처리할 수 있다. (ajax에서 사용하던 콜백 함수와 동일한 기능들의 콜백이 존재한다.)
.done() : $.ajax()의 success 콜백 기능 ex) jqXHR.done(function(data, status, xhr) { console.log(data); }); .fail() : $.ajax()의 error 콜백 기능(요청 실패 시에 실행) ex) jqXHR.fail(function(xhr, status, error) { console.log(status); }); .always() : $.ajax()의 complete 콜백 기능(요청 완료 시에 실행, 요청의 성공/실패 여부와 관계없이 실행) ex) jqXHR.always(function() { console.log("always"); });
🔸XMLHttpRequest
▪️ AJAX에 많이 사용된다.
▪️ XMLHttpRequest는 XML뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.
▪️ 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다.
▪️ XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는데 사용된다.
🔸XML
▪️ XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어이다.
💡 $.ajax()
🔸JQuery ajax() 메소드
▪️ 비동기식 Ajax를 이용하여 HTTP 요청을 전송한다.
▪️ 비동기 방식 : 여러가지 일이 동시적으로 발생한다는 뜻, 서버와 통신하는 동안 다른 작업을 할 수 있다.
▪️ jQuery.ajax() 함수는 기본적으로 하나의 큰 jqXHR 객체 (본질적으로 가짜 자바 스크립트 xhr 객체) 입니다.
$.ajax({
url: 'example.php' // 요청 할 주소
async: true, // false 일 경우 동기 요청으로 변경
type: 'POST' // GET, PUT
data: {
Name: 'ajax',
Age: '10'
}, // 전송할 데이터
dataType: 'text', // xml, json, script, html
beforeSend: function(jqXHR) {}, // 서버 요청 전 호출 되는 함수 return false; 일 경우 요청 중단
success: function(jqXHR) {}, // 요청 완료 시
error: function(jqXHR) {}, // 요청 실패.
complete: function(jqXHR) {} // 요청의 실패, 성공과 상관 없이 완료 될 경우 호출
});
출처: https://webinformation.tistory.com/22 [끄적끄적:티스토리]💡 $.get()
🔸JQuery get() 메소드
▪️ 전달받은 주소로 GET 방식의 HTTP 요청을 전송함
$.get( "example.php?Name=ajax&Age=10", function(jqXHR) {
alert( "success" );
}, 'json' /* xml, text, script, html */
)
.done(function(jqXHR) {
alert( "second success" );
})
.fail(function(jqXHR) {
alert( "error" );
})
.always(function(jqXHR) {
alert( "finished" );
});
출처: https://webinformation.tistory.com/22 [끄적끄적:티스토리]💡 $.post()
🔸JQuery post() 메소드
▪️ 전달받은 주소로 POST 방식의 HTTP 요청을 전송한다.
$.post( "example.php?Name=ajax&Age=10", {
Name: 'ajax',
Age: '10'
}, function(jqXHR) {
alert( "success" );
}, 'json' /* xml, text, script, html */)
.done(function(jqXHR) {
alert( "second success" );
})
.fail(function(jqXHR) {
alert( "error" );
})
.always(function(jqXHR) {
alert( "finished" );
});
출처: https://webinformation.tistory.com/22 [끄적끄적:티스토리]◾ 문자열로 받을 Test1Controller.java 파일을 생성한다.
◾ JQuery를 사용하기 위해 js파일 안에 jquery-3.6.0.js 파일을 넣는다.
◾ <script> 태그를 이용하여 html <head> 태그 안에 넣는다.
◾ JQuery Test라고 적혀있는 버튼을 하나 만든다.
◾ 오류가 생겨, js파일을 jscript라고 파일명을 변경하고 html <script> 태그 안에 있는 경로도 변경한다.
◾ $.get을 추가한다.
◾ 객체를 문자열로 바꿔주는 JSON.stringify(jqXHR)을 사용해 경고창을 띄운다.
◾ 경로는 /test/test07 이다.
◾ 경고창에 해당 이미지처럼 출력된다.
◾ 오류
◾ /test08을 Test1Controller.java에 만들어주세요.
◾ stringify은 객체를 String으로 바꿔준다.
◾ parse는 String(문자열)을 객체로 바꿔준다.
alert( "success : "+ JSON.stringify(jqXHR) ); alert( "name : " + JSON.parse(jqXHR).name );
◾ 수동으로 key와 value를 만드는 예제이다.
◾ key는 항상 문자열이어야 하기 때문에 " " 으로 문자로 표시해달라고 표시한다.
◾ value는 모든 Object가 가능하다.
◾ string으로 만든 것을 객체로 만들어서 객체를 저장해놓고 화면에는 객체를 문자열로 바꿔서 보여준다.
◾ 자동으로 key, value값을 만들어준다.
◾ 변수에 있는 key값으로 접근 가능하다.
◾ value값도 변수로 넣을 수 있다.
◾ @Controller // 페이지로 받을 것이다. - 페이지 주소
◾ @RestController // 페이지 주소가 아니라 문자열로 받는다.
▪️ JSON success와 name을 alert 경고창으로 표시한다.
💭jqXHR의 name이 어떤 걸 접근해서 출력하는 걸까?
▪️ 반환타입이 List객체인 test09함수를 생성한다.
▪️ 실행 화면
▪️ 'json' 파일 형식으로 출력한다.
📝test01.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge; chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/jscript/jquery-3.6.0.js"></script>
</head>
<body>
<div class="login_wrap">
<h1>로그인111</h1>
<form class="login_f" method='get' action='/test/test02'>
<p>
<label for="user_id">ID</label>
<input type="text" name="user_id" id="user_id" value="hunter"/>
</p>
<p>
<label for="user_pw">PW</label>
<input type="password" name="user_pw" id="user_pw" value="12345" />
</p>
<p><input type="submit" value="로그인" class="login_btn" /></p>
<p><input type="button" id="btnTest" value="JQuery Test" /></p>
</form>
</div>
<div>
User_ID : <span th:text="${userId}"></span>
</div>
<script type="text/javascript">
var pw = $("#user_id");
alert(pw.val());
pw.val("testinput");
$.get( "/test/test08", function(jqXHR) {
alert( "success : "+ JSON.stringify(jqXHR) );
alert( "name : "+ JSON.parse(jqXHR).name );
var strObj = "{\"key1\":123, \"key2\":\"value2\"}";
var jsonObj = JSON.parse(strObj);
alert("수동 : "+JSON.stringify(jsonObj));
var obj = {name:"테스트",
age:51,
job:"프로그래머"};
alert("자동 : "+JSON.stringify(obj));
alert("직업 : "+obj.job);
var jobOld = "백수";
var obj = {name : "테스트",
age : 51,
job : jobOld};
alert("직업Old : "+obj.job);
},
'text' /* json, xml, text, script, html */
).done(function(jqXHR) {
alert( "second success" );
}).fail(function(jqXHR) {
alert( "error" );
}).always(function(jqXHR) {
alert( "finished" );
});
$.get( "/test/test08", function(jqXHR) {
alert( "JSON success : "+ JSON.stringify(jqXHR) );
alert( "JSON name : "+jqXHR.name);
},
'json' /* json, xml, text, script, html */
).done(function(jqXHR) {
alert( "second success" );
}).fail(function(jqXHR) {
alert( "error" );
}).always(function(jqXHR) {
alert( "finished" );
});
</script>
</body>
</html>📝Test1Controller.java
package com.shop.test.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.shop.vo.SampleVO;
@RestController
@RequestMapping("/test")
public class Test1Controller {
@GetMapping("/test07")
public String test07() {
return "test/test01";
}
@GetMapping("/test08")
public SampleVO test08() {
SampleVO vo = new SampleVO();
vo.setName("김지연");
return vo;
}
@GetMapping("/test09")
public List<SampleVO> test09() {
List<SampleVO> voList = new ArrayList<SampleVO>();
for(int cnt=0;cnt<3;cnt++) {
SampleVO vo = new SampleVO();
vo.setName("김지연 "+cnt);
voList.add(vo);
}
return voList;
}
}728x90
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript - JQuery (2) (0) | 2022.07.29 |
|---|---|
| JavaScript - 실습문제 (0) | 2022.07.11 |
| JavaScript - 기본 문법 (0) | 2022.07.11 |
댓글