주요 코드만
function printContacts(contacts){
const $list = $('#list');
$list.empty();
$.each(contacts, function(idx, contac){
const $tr=$('<tr>').appendTo($list);
$('<td>').text(contact.no).appendTo($tr);
const $td=$('<td>').appendTo($tr);
$('<a>').attr('href','read.html?no=+contact.no)
.text(contact.name).appendTo($td);
$('<td>').text(contact.address).appendTo($tr);
$('<td>').text(contact.tel).appendTo($tr);
});
}
function init(){
// #nav에 nav.html을 읽어와서 출력 (정적인 ajax)
$('#nav').load('nav.html');
// data를 넘기지 않는 get방식은 url 속성 이름까지 생략 가능
$.ajax('http://sample.bmaster.kro.kr/contacts')
.done((r)=>{printContacts(r.contacts);});
function searchAndPrint(){
const $keyword=$(this).val(); // console.log로 this 확인
if(#keyword.length<2){
$.ajax('http://sample.bmaster.kro.kr/contacts')
.done((r)=>{printContacts(r.contacts);});
console.log('------');
return;
}
// /contacts/search/jo
// 위의 경우 서버의 응답은
// pageno, pagesize, totalcount, contacts로 구성된 객체
// 아래의 경우 서버의 응답은 contacts 배열
$.ajax('http://sample.bmaster.kro.kr/contacts/search/'
+$keyword).done((contacts)=>{printCOntacts(contacts);});
}
$(document).ready(function(){
init();
$('#search').keyup(searchAndPrint);
})
주요 코드만
// 파일 업로드하는 경우 js의 FormData 객체를 사용해야 한다.
// multipart인 <form>을 읽어와서 FormData 객체를 생성
// const formData=
// new FormData(document.getElementById(폼아이디));
// const formData=new FormData($('#폼아이디')[0]);
// <form>이 없는 경우(지금)
// const formData=new FormData();
// formData.append('photo',$('#photo')[0].files[0]);
// $('#photo')[0] → <input type='file' id='photo'>
// file 요소는 파일을 여러개 선택할 수 있다. (multiple설정 시)
// 그래서 선택한 파일들이 files라는 배열을 이룬다.
// $.ajax함수에서는 processData, contentType을
// false로 지정해야 한다.
$(document).ready(function(){
$('#add').click(function(){
// 이름, 주소, 연락처로 주소를 추가
// 자바스크립트를 객체를 만들어 data로 넘긴다
const params = {
name: $('#name').val(),
address: $('#address').val(),
tel: $('#tel').val()
};
$.ajax({
url: 'http://sample.bmaster.kro.kr/contacts',
method: 'post',
data: params,
success: function(result){
// 주소 추가에 성공한 경우 사진을 변경
const formData=new FormData();
formData.append('photo', $('#photo')[0].files[0]);
$.ajax({
url: 'http://sample.bmaster.kro.kr/contacts/'
+result.no+'/photo',
method: 'post',
data: formData,
processData: false,
contentType: false,
success:function(result){
console.log(result);
// location.href='list.html';
}
})
}
})
})
})
웹에서 문서 형식을 지정하는 방법(MIME type)
예를 들어 웹으로 파워포인트 문서를 열면...
파워포인트가 깔려 있으면 파워포인트를 실행해서 연다
파워포인트가 없으면 다운로드..
파워포인트 파일이라는 사실을 어떻게 알까? MIME 타입
application/excel, application/hwp, application/json, image/jpg, image/gif...
서버로 값을 보내는 방식: urlencoded, json, form-data
POST/contacts 주소 추가 urlencoded 또는 application/json
변경하는 건 PUT. 사진변경은 왜 POST? 파일업로드는 POST만 가능하기 때문.
POST/constacts/번호/photo 사진변경
주요 코드만
$(document).ready(function(){
// 폼 3개를 선택
const $forms = $('.my_form');
// jQuery 배열 객체를 가지고 $.each 반복문으로 배열의 원소를
// 뽑아내면 js 객체
$.each($forms, function(idx,f){
// js객체
// console.log(f);
// f원소 내부에서 찾아라(find) → 현재는 사용하면 에러
// f.find('.name');
console.log($(f).find('.name').val());
console.log($(f).find('.address').val());
console.log($(f).find('.tel').val());
console.log('-------------------')
});
})
주요 코드만
$(document).ready(function(){
const $forms=$('.my_form');
cosnt ar = [];
$.each($forms, function(idx,form){
const param = {
name: $(form).find('.name').val(),
tel: $(form).find('.tel').val(),
address: $(form).find('.address').val()
};
console.log(param);
ar.push(param);
});
console.log('===주소록 객체 배열을 json으로 출력');
console.log(JSON.stringify(ar));
})