<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(function(){
var obj = { width:1680, height:1050 };
var data1 = $.param( obj ); // 자바스크립트 객체(리터럴)을 쿼리스트링으로 만들어준다.
console.log(data1) // 결과 : width=1680&height=1050
var data2 = $("form").serialize(); // form의 입력데이터를 쿼리스트링으로 만들어준다.
console.log(data2); // 결과 : a=1&b=2&c=3&d=4&e=5
var data3 = $('form').serializeArray(); // form의 입력데이터를 배열의 Object형태로 만들어준다.
console.log(data3);
/*
결과 :
[Object, Object, Object, Object, Object]
0: Object name: "a"value: "1"
1: Object name: "b"value: "2"
2: Object name: "c"value: "3"
3: Object name: "d"value: "4"
4: Object name: "e"value: "5"
length: 5
*/
//------------------------------------------------------------------------------------------------------------------------------------------
// JSON.stringify 와 JSON.parse는 jQuery 메서드는 아니지만 유용하게 쓰인다. 참고...
var json_str = JSON.stringify(data3); // Obejct(리터럴)을 json문법에 맞게 string 타입으로 변형
console.log(json_str)
//결과 : '[{"name":"a","value":"1"},{"name":"b","value":"2"},{"name":"c","value":"3"},{"name":"d","value":"4"},{"name":"e","value":"5"}]' //string
var json_obj = JSON.parse(json_str); // json문법의 string을 배열의 Object형태로 변형
console.log(json_obj) // 결과는 data3과 같다. //object
})
//------------------------------------------------------------------------------------------------------------------------------------------
//JSON.parse //JSON.stringify 함수는 두번째 파라미터로 함수(key, value)를 받을 수 있고 filter기능을 한다.
var data = '{"a":"100", "b":"200" }';
var result = JSON.parse(data, function(key, value){
return key === 'a' ? 9999 : value;
});
console.log(result) // Object {a: 9999, b: "200"}
</script>
</head>
<body>
<form name="frm" method="post" action="">
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="hidden" name="c" value="3">
<textarea name="d" rows="8" cols="40">4</textarea>
<select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="checkbox" name="f" value="8">
<button type="submit">전송</button>
</form>
</body>
</html>
출처: http://mylife365.tistory.com/143 [변화에 적응하기]
출처: http://mylife365.tistory.com/143 [변화에 적응하기]
출처: http://mylife365.tistory.com/143 [변화에 적응하기]
출처: http://mylife365.tistory.com/143 [변화에 적응하기]
'Web개봘' 카테고리의 다른 글
| [Linux] 시스템/프로세스 메모리 사용량 확인 (check system/process memory usage) (0) | 2018.03.07 |
|---|---|
| oracle - NVL함수 & DECODE함수 (0) | 2018.01.18 |
| mybatis 프로시저 사용질문입니다. (0) | 2017.05.19 |