Ajax : Method

 

기본

$.ajax(option)
$.ajax(url, option)
$.ajax({
    url: "",
    type: "",
    dataType: "",
    data: "",
    success: function(data) {

     }
})

 

* option 

1. url : 불러올 파일명

2. type : get, post  방식

3. dataType : 불러올 파일의 종류(txt,html,xml,json,script)

4. data : 데이터

5. success : 데어터가 성공적으로 불려왔을때 실행할 메서드

6. async : 동기, 비동식 방식 지정( *  Ajax를 사용하는 이유 )

 

 

        $(function(){
            $(".btn").on("click",function(){
                $.ajax("02-load-html.html")
                .done(function(){
                    alert("요청 성공")
                })
                .fail(function(){
                    alert("요청 실패")
                })
                .always(function(){
                    alert("요청 완료")
                })
            })
        })

    $(function(){
        $(".btn").click(function(){
            $.ajax({
                url:"02-load-html.html"
            }).done(function(data){
                $(".wrap").append(data);
            })
        })
    })

 

---

 

 

load()

서버로부터 데이터를 받아서 일치하는 요소에 추가

$(“선택자”).load(“url”,function(){
})

        $(function(){
            $(".btn").click(function(){
                $("#menu").load("01-load-text.html li");
                // html 파일 안의 li만 불러오기
            })
        })

 

 

$.get()

        $(function() {
            $(".btn").click(function() {
                $.get("02-load-html.html", function(data, status) {
                    $(".wrap").html(data + "<br>" + status)
                })
            })
        })

 

 

$.post()

get과 같은 문법, ftp 서버에서만 테스트 가능

 

 

 

$.getJSON()

대부분의 공개 자료들(ex. 버스, 날씨, 약국 등등)이 xml / json 파일이기 때문에

ajax에서 제일 자주 사용하는 기능.

php로 작성한 json도 출력 가능

 

$.getJSON(“파일명.json”,function(data){
  $(“선택자”).html('<p>'+data.age+'</p>')
})

$ajax({
  url :url주소,
  dataType:“JSON”,
  data:요청내용,
  success:성공콜백함수
})

        $(function(){
            $(".btn").click(function(){
                $.ajax({
                    url:"singer-group.json",
                    dataType:"json"
                }).done(function(data){
                    console.log(data);
                    $(".wrap").append(data.name+"<br>");
                    $(".wrap").append(data.members+"<br>");
                    $(".wrap").append(data.albums.a3+"<br>");
                })
            })
        })

        $(function() {
            $(".btn").click(function() {
                $.getJSON("json-php.php", function(data) {
                    console.log(data);
                    if(data.result.length>0){
                        // $.("선택자").(data.result, function(){}) 같은 의미
                        $.each(data.result, function(){
                            var info= " | color: "+this['color']+", option: "+this['option'];
                            $(".wrap").append(info);
                        })
                    }
                })
            })
        })

 

XML 

                $.ajax({
                    url:"mart.xml",
                    dataType:"xml"
                }).done(function(data){
                    console.log(data);
                    $(data).find("food").each(function(){
                        var info=$(this).find("name").text()+"<br>";
                        $(".wrap").append(info);
                    })
                })

 

 

        $(function(){
            $.ajax({
                url:"tour.xml",
                dataType:"xml",
                success:function(data){
                //.done와 같음    
                    console.log(data);
                    $(data).find("destination").each(function(){
                        //title
                        var $title=$(this).find("title").text();
                        //img
                        var $img=$(this).find("img").text();
                        //cost
                        var $cost=$(this).find("cost").text();
                        
                        $(".tour").append("<li> <h2>"+$title+"</h2> <img src='"+$img+"'> <p>"+$cost+"원</p> </li>")
                    })
                }
            })
        })