[jQuery] Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 / getElementById를 jQuery로 바꿔보자
jQuery / Method / .val() - 양식(form)의 값을 가져오거나 설정하는 메소드
.val()
.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다.
.val()
var jh = $('input#jhInput' ).val();
은 아이디가 jhInput인 input의 요소의 값을 jh에 저장합니다.<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'button#jbInputButton' ).click( function() { var jb = $( 'input#jbInput' ).val(); alert( jb ); } ); } ); </script> </head> <body> <p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p> </body> </html>
_.val(value)
$( 'input#jhInput' ).val ('ABCDE' );
는 아이디가 jhInput인 input 요소의 값을 ABCDE로 정합니다.<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'button#jbInputButton' ).click( function() { $( 'input#jbInput' ).val( 'ABCDE' ); } ); } ); </script> </head> <body> <p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p> </body> </html>
비동기식
T : 복잡한 구조를 전달하기 힘들다 (예:key/value) 전달하기 제일 간단하다.
X : 태그들이 많아서 무거워진다(용량이 많아진다.) 또한, 가독성때문에 Enter를 치는데 더욱 용량이많아진다.
J : { k1:v1, k2:v2, .. }
XML / JSON => Data Format
[jQuery=> $() 메서드 4개]
load() element: element로 변화된 데이터를 갱신
get() jQuery
post() jQuery
ajax() 기능이 체계적으로 많다. get / post로 바꿀 수 있고, 여러방식을 쓸 수 있다. get, post보단 ajax쓰는게 확장성이 좋다.
JSON.parse() : json -> jsObj 버전높으면 자동으로된다.
JSON.stringify() : jsObj -> json
https://qkrrudtjr954.github.io/jstl/2018/02/08/ajax-call.html
JSON 6가지 Data Types
a string
a number
an object (JSON object)
an array " [ ] "
a boolean
null
@RestController ( @ResponseBody가 내장되어 있다. )
3가지를 리턴한다.
Text, XML, JSON
@RequestBody는 클라이언트측에서 서버에게 JSON형태를 넘긴다.
단, 꼭 써줘야한다!!
contentType: "application/json",
data: jsonData, ..[jQuery] getElementById를 jQuery로 바꿔보자
<SCRIPT>
// dom 이용
window.onload = function() {
var var_id = document.getElementById("var_id");
console.log(var_id);
}
// `jQuery 이용`
$(document).ready(function() {
var $div = $("#var_id"); // id명 앞에 #이 붙는다!
console.log($div); // jQuery select에서 제공하는 모든것을 보여준다.
cosole.log($div[0]); // 이경우 실제 div의 내용이 보여진다.
});
</SCRIPT>var contents = document.getElementById('contents');
var contents = $('#contents');
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents'); //returns a jQuery Object
var contents = $('#contents')[0]; //returns a HTML DOM Object
