[JavaScript] JQuery와 Ajax

기본요청 양식

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ajax 공부중</title>
  <!--jquery사용을 위한 CDN-->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
  <h1>GET 방식 요청</h1>
  <button type="button" onclick="GetRequest()">GET</button>
  <p id="get"></p>
  <h1>POST 방식 요청</h1>
  <button type="button" onclick="PostRequest()">POST</button>
  <p id="post"></p>
  <script>
    function GetRequest() {
    //$.ajax("url") 이것만 해도됨
      //ajax메소드
      $.ajax({
        url:"/study/sample.txt",
        //보낼 데이터가 있으면 json형식으로 전달
        //data:{} 
        type:"GET",
        //받을 데이터의 타입 지정
        dataType:"text"
      })
      //요청에 성공하면 done으로 data가 전달됨
      //status는 success / fail 여부를 return
      .done(function(data, status){
        document.getElementById('get').innerHTML = data;
      })
    }
    function PostRequest(){
      $.ajax({
        url:"/study/sample.txt",
        //data:{}
        type:"POST",
        dataType:"text"
      })
      .done(function(data, status){
        document.getElementById('post').innerHTML = data;
      })
    }
  </script>
</body>
</html>

data전송 / data요청

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ajax 공부중</title>
  <!--jquery사용을 위한 CDN-->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
  <textarea id='text'></textarea>
  <h1>GET 방식 요청</h1>
  <button type="button" onclick="GetRequest()">GET</button>
  <p id="get"></p>
  <h1>POST 방식 요청</h1>
  <button type="button" onclick="PostRequest()">POST</button>
  <p id="post"></p>
  <script>
    function GetRequest() {
     $.ajax({
      url:"/study/sample.php",
      data: {name:document.getElementById('text').value},
      type:"GET"
      })
     .done(function(data){
      document.getElementById('get').innerHTML = data;
     })
    }
    function PostRequest(){
      $.ajax({
      url:"/study/sample.php",
      data: {name:document.getElementById('text').value},
      type:"POST"
      })
     .done(function(data){
      document.getElementById('post').innerHTML = data;
     })
    }
  </script>
</body>
</html>

get과 post메소드가 따로 있음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ajax 공부중</title>
  <!--jquery사용을 위한 CDN-->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
  <h1>GET 방식 요청</h1>
  <button type="button" onclick="GetRequest()">GET</button>
  <p id="get"></p>
  <h1>POST 방식 요청</h1>
  <button type="button" onclick="PostRequest()">POST</button>
  <p id="post"></p>
  <script>
    function GetRequest() {
      //$.get("url",콜백함수(data,status))
     $.get("/study/sample.txt",function(data){
      document.getElementById('get').innerHTML = data;
     })
    }
    function PostRequest(){
      //$.post("url",보낼data,콜백함수(data,status))
      //보낼data는 생략가능 한거같은데 데이터 없으면 post안씀
      $.post("/study/sample.txt",function(data){
        document.getElementById('post').innerHTML = data;
      })
    }
  </script>
</body>
</html>

data전송 / data요청

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ajax 공부중</title>
  <!--jquery사용을 위한 CDN-->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
  <textarea id='text'></textarea>
  <h1>GET 방식 요청</h1>
  <button type="button" onclick="GetRequest()">GET</button>
  <p id="get"></p>
  <h1>POST 방식 요청</h1>
  <button type="button" onclick="PostRequest()">POST</button>
  <p id="post"></p>
  <script>
    function GetRequest() {
     $.get(
      "/study/sample.php",
      {name:document.getElementById('text').value},
      function(data){
      document.getElementById('get').innerHTML = data;
     })
    }
    function PostRequest(){
      $.post("/study/sample.php",
      {name:document.getElementById('text').value},
      function(data){
        document.getElementById('post').innerHTML = data;
      })
    }
  </script>
</body>
</html>

etc...

.done(function() {
   //요청 성공시 실행하는 메소드
})

.fail(function() {
	//요청 실패시 실행하는 메소드
    //errorThrown(세번째 파라미터) 이용해 오류 도출 가능
})

.always(function() {
	//성공과실패 여부에 상관없이 실행하는 메소드
});

저작자표시

'📚 Programming > Web' 카테고리의 다른 글

[JavaScript] Fetch API로 JSON Parsing (0)	2021.02.16
[JavaScript] Ajax XMLhttpRequest (0)	2021.02.07
[HTML] 기초정리 (0)	2021.01.31
[HTML] table & list (0)	2021.01.31

'📚 Programming > Web' 카테고리의 다른 글

티스토리툴바