2주차_서버와 통신하기 2

Ajax 연습하기

ajax.html

0.00MB

    $.get(url).then(function (data) {
    	console.log(data);
    });

-$.get함수 사용시 점(".")을 꼭 사용해야 함

ajax요청 중에 데이터를 가지고 오는 것은 get요청, get 요청을 만들 때 뒤에 주소를 쓰면 주소에 결과를 가지고 옴

결과를 사용할때는 .then을 연결해서 사용할 수 있음

-.then부분 작성시 괄호가 많아 제대로 작성하기 어려울 수 있음. 주의요망

위 코드의 내용은 데이터를 다 가져왔으면 then(그러면), then절이 console.log로 데이터를 출력

크롬으로 개발자도구를 이용해 확인한 결과

 

  $.get(url).then(function (data) {
    for (let i = 0; i < data.length; i++) {
      $("#titles").text(data[i].title);
    }
  });

 

titles이라는 id 속성값을 가진 태그에 text에 가져온 data의 i번째 data 중 title(키값)을 넣음

실행한 결과

위 코드를 실행하면 한줄의 내용이 나오는데 이유는 태그안에 내용을 누적해서 더하는 것이 아닌 바뀌는 것

즉 0부터 data의 총 길이(개수)까지 반복문으로 돔

id 속성값이 titles인 태그에 text의 내용이 data의 i번째 title 값으로 바뀌는 것

 

  $.get(url).then(function (data) {
    let content = "";
    for (let i = 0; i < data.length; i++) {
      content = $("#titles").text() + data[i].title;
      $("#titles").text(content);
    }
  });

content라는 변수를 하나 만들어 반복문을 0부터 data의 개수까지 돌아 content에 id 속성값이 titles인 태그에 text와 i번째 data의 title의 합해진 값을 넣음. id 속성값이 titles인 태그에 text에 content값을 넣음

반복문이 돌아 마무리 되면 d 속성값이 titles인 태그에는 총 data의 title의 합이 들어가게 됨

 

  content = $("#titles").text() + data[i].title + "<br>";
  $("#titles").text(content);

 

실행한 결과

 

data의 title 마다 엔터를 넣고 싶어서 이런식으로 +"<br>"을 하게 되면 <br>이라는 문자가 들어가게됨

  content = $("#titles").html() + data[i].title + "<br>";
  $("#titles").html(content);

실행한 결과

text가 아닌 html을 넣게 되면 "<br>"문자가 아닌 태그로 인식되어 엔터가 된것을 확인할 수 있음

---

게시판 클릭 이벤트에 Ajex제어 연결하기

bt2.html

0.00MB

  function clickPost(postid) {
    let url = "https://jsonplaceholder.typicode.com/posts/" + postid;

    $.get(url).then(function (data) {
      $("#exampleModalLabel").text(data.title);
      $("#modalContent").text(data.body);
      $("#exampleModal").modal("show");
    });

-태그 안의 텍스트를 변경하거나 가져올 때는 text함수를 사용함

url변수 안에 api sample사이트의 주소를 넣어줌 이때 postid를 사용해 눌렀을때 각 postid값에 맞게 넣어줌

postid가 1이라면 posts/1이 되고 2라면 posts/2가 되는 것

 

get을 이용해 url주소에 데이터를 가져와 then절을 돔

id값이 exampleModalLabel에 텍스트는 data의 title로 id값이 modalContent에 텍스트는 data의 body로 변경함

id값이 exampleModal인 modal(모달)을 show로 바꿔줌 

클릭했을때 모달이 뜨면서 윗줄에는 title이 밑줄에는 body가 뜸