JSON(Javascript Object Notation)
구문형식은 자바스크립트를 따르지만, 언어로부터 완전 독립적이기 때문에 서로 다른 프로그래밍언어간에 데이터를 교환하기 위해 현재 가장 널리 사용되는 표기법이다.
XML 은 열기 태그와 닫기 태그를 일일이 써줘야 한다.
<name>홍길동</name>
<age>32</age>
JSON 은 key : value 로 간단하게 표기한다.
var kk = { "name" : "홍길동", "age" : 32 }
value 에는 문자열(string), 숫자, 객체(object), 배열(array), 불리언(boolean), null 이 들어갈 수 있다.
JSON 으로 코드를 구현할 경우 반드시 알아야 할 사항은 UTF-8 만 인식한다는 점이다.
파일 Encoding 모드가 ANSI로 되어 있으면 결과값을 돌려주지 못한다.
EditPlus 에디터에서 보면 화면 하단 오른쪽에 파일의 인코딩 모드가 무엇인지 알려준다.
JSON.parse()
인자로 전달된 문자열(string 객체)을 자바스크립트의 데이터(json 객체)로 변환한다.
JSON.stringify()
인자로 전달된 자바스크립트의 데이터(json 객체)를 문자열(string 객체)로 변환한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Example</title>
</head>
<body>
<script>
var mydetails = {
"name" : "John",
"age " : "31"
};
var jsonto = JSON.stringify(mydetails);
console.log(jsonto);
var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}'; // JSON 형식의 문자열
var dog = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함.
console.log(dog);
</script>
<script>
function signup() {
var member = {
"email" : "test@naver.com",
"password" : "1234"
};
$.ajax({
url : '/abc/result.php',
dataType : 'json',
type : 'POST',
data : JSON.stringify(member), //그냥 member 사용하면 error 발생!
contentType : 'application/json; charset=UTF-8',
success : function(result) {
console.log(result);
}
});
}
</script>
</body>
</html> |
결과
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#execute').click(function(){
var formData = $('form').serialize();
$.ajax({
url:'./abc.php',
type:'post',
data:formData,
success:function(data){
$('#showtime').text(data);
}
});
});
</script>
<!-- 문서에 여러개의 폼이 있을 경우 document.forms[index] 로 접근할 수 있다. -->
<script>
$("#sub").click(function(){
$("form").each(function(){
var fd = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "solve.php",
data: fd,
processData: false,
contentType: false,
success: function(data,status) {
//this will execute when form is submited without errors
},
error: function(data, status) {
//this will execute when get any error
},
});
});
});
</script>
|
