JS, jquery - 다이어리 만들기 ver.3

Jiwontwopunch·2022년 1월 3일
0

TIL

목록 보기
25/92
post-thumbnail

list.html

주요 코드만

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);
})

write.html

주요 코드만

// 파일 업로드하는 경우 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';
         }
       })
     }
   })
  })
})

write 설명

웹에서 문서 형식을 지정하는 방법(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 사진변경

write-barch1.html

주요 코드만

$(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('-------------------')
  });
})

write-barch2.html

주요 코드만

$(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));
})

0개의 댓글